CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Princeton Collins
Princeton Collins

Reputation: 65

Webkit Animation interferes with jQuery function

I'm using a jQuery function for a parallax background inside a div.

When the page loads, I have some css webkit animations that animate the background.

However, after the page has finished loading, my jQuery function that animates the parallax effect on the background doesn't work.

Here is the code I have:

$(document).ready(function(){
        
        $('#square').mousemove(function(e) {
             var x = -(e.pageX + this.offsetLeft) / 4;
             var y = -(e.pageY + this.offsetTop) / 4;
             $(this).css('background-position', x + 'px ' + y + 'px');
         });
        
});
#square { height: 700px; 
                  width: 500px; 
                  display: inline-block; 
                  margin-left: 100px; 
                  position: absolute; 
                  right: 37%; 
                  top: 15%;
		          background: transparent;
		         -webkit-animation-name: image-fadein;
		         -webkit-animation-delay: .8s;
		         -webkit-animation-duration: 1s;
		         -webkit-animation-iteration-count: 1;
		         -webkit-animation-timing-function: ease-in-out;
		         -webkit-animation-fill-mode: forwards;
		
                 @-webkit-keyframes image-fadein {
			        0% { background: transparent; }
			        25% { background: #f2efef; }
			        50% { background: #333; }
			        100% { background-image: url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
				           background-size: cover no-repeat;
				           background-position: 35% 30%; }
		         }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="square">
	<span class="l1"></span>
	<span class="l2"></span>
	<span class="l3"></span>
	<span class="l4"></span>
</div>

I should mention that the jQuery function DOES work when I remove the webkit animations completely from the div element and just leave the height, width, display, margin, position, and background.

Does anyone know why it seems that the webkit animations are interfering with the jQuery code?

Upvotes: 1

Views: 303

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42736

This is because properties that have been animated with a keyframe rule cannot be overridden by inline css rules, or at least not by any method I have tested.

You could

  1. Move the animation styles to a class
  2. Add the class to the element
  3. Add an animationend listener to listen for the end of the animation
  4. At the end of the animation remove the animation class and reset the background-image and other styles.

$(document).ready(function(){
  $('#square').mousemove(function(e) {
    var x = -(e.pageX + this.offsetLeft) / 4;
    var y = -(e.pageY + this.offsetTop) / 4;
    $(this).css("background-position",x + 'px ' + y + 'px');
  }).on("animationend",function(e){
    //You can access animation-name value by
    //e.originalEvent.animationName

    $(this).removeClass("animated").css({
      backgroundImage:"url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg)",
      backgroundSize: 'cover no-repeat',
      backgroundPosition: '35% 30%'
    });
  });
});
#square { 
  width: 80%; 
  height:100%;
  position: absolute; 
  top: 0px;
  left:0px;
  background: transparent;
}

.animated {
  -webkit-animation-name: image-fadein;
  -webkit-animation-delay: .8s;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;  
}

@-webkit-keyframes image-fadein {
  0% { background: transparent; }
  25% { background: #f2efef; }
  50% { background: #333; }
  100% { background-image: url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
    background-size: cover no-repeat;
    background-position: 35% 30%; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="square" class="animated">
  <span class="l1"></span>
  <span class="l2"></span>
  <span class="l3"></span>
  <span class="l4"></span>
</div>

You could also iterate over the styleSheets collection to find the keyframes rule ("image-fadein"), from there find the last keyframe rule ("100%"), and modify the styles from there.

Demo

$(document).ready(function(){
  var KFSRule = findKFSRule("image-fadein");
  var KFRule = KFSRule && KFSRule.findRule("100%");
  $('#square').mousemove(function(e) {
    var x = -(e.pageX + this.offsetLeft) / 4;
    var y = -(e.pageY + this.offsetTop) / 4;
    if(KFRule){
      KFRule.style.backgroundPosition = x + 'px ' + y + 'px';
    }
  });
}); 

function findKFSRule(ruleName) {
  var foundRule = null;
  var sheets = [].slice.call(document.styleSheets);
  sheets.forEach(function(sheet){
    var rules = [].slice.call(sheet.cssRules);
    rules.forEach(function(rule){
      if(rule.type == CSSRule.WEBKIT_KEYFRAMES_RULE && rule.name==ruleName){
        foundRule = rule;
      }
    });
  });
  return foundRule;
}
#square { 
  width: 80%; 
  height:100%;
  position: absolute; 
  top: 0px;
  left:0px;
  background: transparent;
  -webkit-animation-name: image-fadein;
  -webkit-animation-delay: .8s;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes image-fadein {
  0% { background: transparent; }
  25% { background: #f2efef; }
  50% { background: #333; }
  100% { background-image: url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
    background-size: cover no-repeat;
    background-position: 35% 30%; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="square">
  <span class="l1"></span>
  <span class="l2"></span>
  <span class="l3"></span>
  <span class="l4"></span>
</div>

Note though that you cannot iterate over a style sheets css rules if it is an external stylesheet. So your styles will have to be embedded in the page, ie <style></style>

If you need them to be defined in an external style sheet you may need to find another work around utilizing maybe CSSStyleSheet.deleteRule,CSSStyleSheet.insertRule or other methods.

Upvotes: 1

Related Questions