Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Animated heading problems

    I've created a heading with two animations - one repeats once and fades the text in, the second one changes the text's shadow opacity and repeats infinitely.

    Problem one is since i put the animation in, the page itself now loads halfway down instead of at the top like normal. i think maybe it's the way i'm positioning the heading? i've tried relative, and leaving position out altogther but it didn't change anything.

    Two, i'm including both these animations in one ID - is this okay to do? When I first made it, it would do the fade and then the shadow, but now it seems to ignore the fade. could be related to first problem, i don't know.

    example code of how I'm animating:
    html
    Code:
    <h1 id="posw">W</h1>
    css
    Code:
    h1{     position: absolute;
    	float: left;
    	font-family: 'BenthamRegular';
    	text-align: center;
    	font-size: 54px;
    	color: #fafefe;	
    }
    #posw{ position: relative;
    	top: 0px;
    	left: 77px;
    	-moz-animation: fadein 2s linear 1;
    	-webkit-animation: fadein 9s linear 1;
    	-ms-animation: fadein 9s linear 1;
    	-o-animation: fadein 9s linear 1;
    	animation: fadein 9s linear 1;
    
    	-moz-animation: shadow 3s linear infinite;
    	-webkit-animation: shadow 3s linear infinite;
    	-ms-animation: shadow 3s linear infinite;
    	-o-animation: shadow 3s linear infinite;
    	animation: shadow 3s linear infinite;
    
    }
    
    @-moz-keyframes fadein {
    	from { opacity: 0; }
    	to { opacity: 1; }
    }
    @-webkit-keyframes fadein {
    	from { opacity: 0; }
    	to { opacity: 1; }
    }
    @-ms-keyframes fadein {
    	from { opacity: 0; }
    	to { opacity: 1; }
    }
    @-o-keyframes fadein {
    	from { opacity: 0; }
    	to { opacity: 1; }
    }
    @keyframes fadein {
    	from { opacity: 0; }
    	to { opacity: 1; }
    }
    @-moz-keyframes shadow {
    	from { 	text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }
    	50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }
    	to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }
    }
    @-webkit-keyframes shadow {
    	from { 	text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }
    	50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }
    	to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }
    }
    @-ms-keyframes shadow {
    	from { 	text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }
    	50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }
    	to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }
    }
    @-o-keyframes shadow {
    	from { 	text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }
    	50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }
    	to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }
    }
    @-keyframes shadow {
    	from { 	text-shadow: 0px 0px 6px rgba(255,255,255,0.2); }
    	50% { text-shadow: 0px 0px 6px rgba(255,255,255,1); }
    	to { text-shadow: 0px 0px 6px rgba(255,255,255,0.3); }
    }
    Last edited by backa; 11-06-2012 at 02:22 PM.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,708
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there backa,

    the cause of the page loading "half way down" is the highlighted in red attribute here...
    Code:
    
    <input type="text" id="name" name="name" 
    value="" placeholder="Enter your name" autofocus="autofocus" 
     required="required"  />
    
    As for the animation, why not put all the changes in a single "from to", as indicated in this other thread of yours...


    coothead

  • Users who have thanked coothead for this post:

    backa (11-06-2012)

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Thanks again, coothead!

    It was the autofocus, although previously it was giving focus to the field while loading normally. Any other way i can get the first field focused?

    I put the transitions comma-separated on one line as below, and all is working now. Much appreciated.

    Code:
    	-moz-animation: fadein 2.6s linear 1, shadow 3s linear infinite;
    	-webkit-animation: fadein 9s linear 1, shadow 3s linear infinite;
    	-ms-animation: fadein 9s linear 1, shadow 3s linear infinite;
    	-o-animation: fadein 9s linear 1, shadow 3s linear infinite;
    	animation: fadein 9s linear 1, shadow 3s linear infinite;
    Last edited by backa; 11-06-2012 at 11:54 AM.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,708
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there backa,

    put this javascript in the head section of your document...
    Code:
    <script type="text/javascript">
    
    function init(){
    
      onscroll=function(){
    
      window.scrollY?
      sy=window.scrollY:
      sy=document.body.parentNode.scrollTop;
    
    if((sy>0)&&(sy<=600)){
      document.getElementById('name').focus();
       }
    else {
      document.getElementById('name').blur();
       }
      }
     }
    
      window.addEventListener?
      window.addEventListener('load',init,false):
      window.attachEvent('onload',init);
    
    </script>
    
    coothead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •