Limited-Time Donation Special!
Upgrade to Snow for $20 USD and receive a free copy of Oblivion Light ($5 discount).
Upgrade to +Blizzard for $35 USD and receive a free copy of Oblivion Light ($15 discount).

Please visit the thread below for more details.
CLICK HERE

Contact @Davlin with questions or comments.

Jump to content
mr-pimpen

little Halloween trick

Recommended Posts

Posted (edited)

play a little Halloween trick on your members pretty fun a just the timing so i will take a member to freak out

HTML

<span>C</span><span>S</span><span>S</span><span>&nbsp;</span><span>S</span><span>m</span><span>o</span><span>k</span><span>y</span><span>&nbsp;</span><span>T</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>E</span><span>f</span><span>f</span><span>e</span><span>c</span><span>t</span>

 

 

CSS TRCK

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Finger+Paint);



span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 10s 10s both;
}

span:nth-child(even){
  animation-name: smoky-mirror;
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform:
      translate3d(15rem,-8rem,0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke; }
  to {
    transform:
      translate3d(18rem,-8rem,0)
      rotate(-40deg) 
      skewX(-70deg)
      scale(2);
     text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(3 + ($item/10))}s; 
  }
} 

tweek this little section

  animation: smoky 10s 10s both;

 

Edited by mr-pimpen
  • Upvote 1

Share this post


Link to post
Share on other sites
2 hours ago, mr-pimpen said:

play a little Halloween trick on your members pretty fun a just the timing so i will take a member to freak out

HTML

<span>C</span><span>S</span><span>S</span><span>&nbsp;</span><span>S</span><span>m</span><span>o</span><span>k</span><span>y</span><span>&nbsp;</span><span>T</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>E</span><span>f</span><span>f</span><span>e</span><span>c</span><span>t</span>

 

 

CSS TRCK

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Finger+Paint);



span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 10s 10s both;
}

span:nth-child(even){
  animation-name: smoky-mirror;
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform:
      translate3d(15rem,-8rem,0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke; }
  to {
    transform:
      translate3d(18rem,-8rem,0)
      rotate(-40deg) 
      skewX(-70deg)
      scale(2);
     text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(3 + ($item/10))}s; 
  }
} 

tweek this little section

  animation: smoky 10s 10s both;

 

Your writing sass / scss where ips only supports css. Your also importing compass css before you npm installed it. 

You would need the output of the file not the input. 

😊

 

Share this post


Link to post
Share on other sites
6 hours ago, Cookie Monster said:

Your writing sass / scss where ips only supports css. Your also importing compass css before you npm installed it. 

You would need the output of the file not the input. 

😊

 

oh ok than u can delet it if you want i must miss something

Share this post


Link to post
Share on other sites
@import url("https://fonts.googleapis.com/css?family=Finger+Paint");

span {
	display: inline-block;
	text-shadow: 0 0 0 whitesmoke;
	-webkit-animation: smoky 10s 10s both;
	animation: smoky 10s 10s both;
}

span:nth-child(even) {
	-webkit-animation-name: smoky-mirror;
	animation-name: smoky-mirror;
}

@-webkit-keyframes smoky {
	60% {
		text-shadow: 0 0 40px whitesmoke;
	}
	to {
		-webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
		transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
		text-shadow: 0 0 20px whitesmoke;
		opacity: 0;
	}
}

@keyframes smoky {
	60% {
		text-shadow: 0 0 40px whitesmoke;
	}
	to {
		-webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
		transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
		text-shadow: 0 0 20px whitesmoke;
		opacity: 0;
	}
}

@-webkit-keyframes smoky-mirror {
	60% {
		text-shadow: 0 0 40px whitesmoke;
	}
	to {
		-webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
		transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
		text-shadow: 0 0 20px whitesmoke;
		opacity: 0;
	}
}

@keyframes smoky-mirror {
	60% {
		text-shadow: 0 0 40px whitesmoke;
	}
	to {
		-webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
		transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
		text-shadow: 0 0 20px whitesmoke;
		opacity: 0;
	}
}

span:nth-of-type(1) {
	-webkit-animation-delay: 3.1s;
	animation-delay: 3.1s;
}

span:nth-of-type(2) {
	-webkit-animation-delay: 3.2s;
	animation-delay: 3.2s;
}

span:nth-of-type(3) {
	-webkit-animation-delay: 3.3s;
	animation-delay: 3.3s;
}

span:nth-of-type(4) {
	-webkit-animation-delay: 3.4s;
	animation-delay: 3.4s;
}

span:nth-of-type(5) {
	-webkit-animation-delay: 3.5s;
	animation-delay: 3.5s;
}

span:nth-of-type(6) {
	-webkit-animation-delay: 3.6s;
	animation-delay: 3.6s;
}

span:nth-of-type(7) {
	-webkit-animation-delay: 3.7s;
	animation-delay: 3.7s;
}

span:nth-of-type(8) {
	-webkit-animation-delay: 3.8s;
	animation-delay: 3.8s;
}

span:nth-of-type(9) {
	-webkit-animation-delay: 3.9s;
	animation-delay: 3.9s;
}

span:nth-of-type(10) {
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
}

span:nth-of-type(11) {
	-webkit-animation-delay: 4.1s;
	animation-delay: 4.1s;
}

span:nth-of-type(12) {
	-webkit-animation-delay: 4.2s;
	animation-delay: 4.2s;
}

span:nth-of-type(13) {
	-webkit-animation-delay: 4.3s;
	animation-delay: 4.3s;
}

span:nth-of-type(14) {
	-webkit-animation-delay: 4.4s;
	animation-delay: 4.4s;
}

span:nth-of-type(15) {
	-webkit-animation-delay: 4.5s;
	animation-delay: 4.5s;
}

span:nth-of-type(16) {
	-webkit-animation-delay: 4.6s;
	animation-delay: 4.6s;
}

span:nth-of-type(17) {
	-webkit-animation-delay: 4.7s;
	animation-delay: 4.7s;
}

span:nth-of-type(18) {
	-webkit-animation-delay: 4.8s;
	animation-delay: 4.8s;
}

span:nth-of-type(19) {
	-webkit-animation-delay: 4.9s;
	animation-delay: 4.9s;
}

span:nth-of-type(20) {
	-webkit-animation-delay: 5s;
	animation-delay: 5s;
}

span:nth-of-type(21) {
	-webkit-animation-delay: 5.1s;
	animation-delay: 5.1s;
}

Easier HTML read

<span>C</span>
<span>S</span>
<span>S</span>
<span>&nbsp;</span>
<span>S</span>
<span>m</span>
<span>o</span>
<span>k</span>
<span>y</span>
<span>&nbsp;</span>
<span>T</span>
<span>e</span>
<span>x</span>
<span>t</span>
<span>&nbsp;</span>
<span>E</span>
<span>f</span>
<span>f</span>
<span>e</span>
<span>c</span>
<span>t</span>

 

  • Thanks 1

Share this post


Link to post
Share on other sites
On 10/4/2018 at 2:52 AM, Cookie Monster said:
@import url("https://fonts.googleapis.com/css?family=Finger+Paint");

span {
	display: inline-block;
	text-shadow: 0 0 0 whitesmoke;
	-webkit-animation: smoky 10s 10s both;
	animation: smoky 10s 10s both;
}

span:nth-child(even) {
	-webkit-animation-name: smoky-mirror;
	animation-name: smoky-mirror;
}

@-webkit-keyframes smoky {
	60% {
		text-shadow: 0 0 40px whitesmoke;
	}
	to {
		-webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
		transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
		text-shadow: 0 0 20px whitesmoke;
		opacity: 0;
	}
}

@keyframes smoky {
	60% {
		text-shadow: 0 0 40px whitesmoke;
	}
	to {
		-webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
		transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
		text-shadow: 0 0 20px whitesmoke;
		opacity: 0;
	}
}

@-webkit-keyframes smoky-mirror {
	60% {
		text-shadow: 0 0 40px whitesmoke;
	}
	to {
		-webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
		transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
		text-shadow: 0 0 20px whitesmoke;
		opacity: 0;
	}
}

@keyframes smoky-mirror {
	60% {
		text-shadow: 0 0 40px whitesmoke;
	}
	to {
		-webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
		transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
		text-shadow: 0 0 20px whitesmoke;
		opacity: 0;
	}
}

span:nth-of-type(1) {
	-webkit-animation-delay: 3.1s;
	animation-delay: 3.1s;
}

span:nth-of-type(2) {
	-webkit-animation-delay: 3.2s;
	animation-delay: 3.2s;
}

span:nth-of-type(3) {
	-webkit-animation-delay: 3.3s;
	animation-delay: 3.3s;
}

span:nth-of-type(4) {
	-webkit-animation-delay: 3.4s;
	animation-delay: 3.4s;
}

span:nth-of-type(5) {
	-webkit-animation-delay: 3.5s;
	animation-delay: 3.5s;
}

span:nth-of-type(6) {
	-webkit-animation-delay: 3.6s;
	animation-delay: 3.6s;
}

span:nth-of-type(7) {
	-webkit-animation-delay: 3.7s;
	animation-delay: 3.7s;
}

span:nth-of-type(8) {
	-webkit-animation-delay: 3.8s;
	animation-delay: 3.8s;
}

span:nth-of-type(9) {
	-webkit-animation-delay: 3.9s;
	animation-delay: 3.9s;
}

span:nth-of-type(10) {
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
}

span:nth-of-type(11) {
	-webkit-animation-delay: 4.1s;
	animation-delay: 4.1s;
}

span:nth-of-type(12) {
	-webkit-animation-delay: 4.2s;
	animation-delay: 4.2s;
}

span:nth-of-type(13) {
	-webkit-animation-delay: 4.3s;
	animation-delay: 4.3s;
}

span:nth-of-type(14) {
	-webkit-animation-delay: 4.4s;
	animation-delay: 4.4s;
}

span:nth-of-type(15) {
	-webkit-animation-delay: 4.5s;
	animation-delay: 4.5s;
}

span:nth-of-type(16) {
	-webkit-animation-delay: 4.6s;
	animation-delay: 4.6s;
}

span:nth-of-type(17) {
	-webkit-animation-delay: 4.7s;
	animation-delay: 4.7s;
}

span:nth-of-type(18) {
	-webkit-animation-delay: 4.8s;
	animation-delay: 4.8s;
}

span:nth-of-type(19) {
	-webkit-animation-delay: 4.9s;
	animation-delay: 4.9s;
}

span:nth-of-type(20) {
	-webkit-animation-delay: 5s;
	animation-delay: 5s;
}

span:nth-of-type(21) {
	-webkit-animation-delay: 5.1s;
	animation-delay: 5.1s;
}

Easier HTML read

<span>C</span>
<span>S</span>
<span>S</span>
<span>&nbsp;</span>
<span>S</span>
<span>m</span>
<span>o</span>
<span>k</span>
<span>y</span>
<span>&nbsp;</span>
<span>T</span>
<span>e</span>
<span>x</span>
<span>t</span>
<span>&nbsp;</span>
<span>E</span>
<span>f</span>
<span>f</span>
<span>e</span>
<span>c</span>
<span>t</span>

 

thanks for the help works better

Share this post


Link to post
Share on other sites
What do you think? Remember the human.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×