stackoom
  简体   繁体   中英

Transform Translate 3d with JQuery

 原文  2019-03-12 00:51:16  7   1    jquery/ animation/ scroll/ onscroll/ translate3d

Question

I have a small problem I try to animate div on scroll but it looks like I made a mistake somewhere At the very beginning, when loading the page, positioning does not take place in the center of the window, as I indicated, but with an offset to the left This is my code If someone knows or sees what the problem will be extremely grateful 

 $(window).scroll(function() { var scroll = $(window).scrollTop(); $(".image-1").css({ transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')', //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments //"-webkit-filter": "blur(" + (scroll/200) + "px)", //filter: "blur(" + (scroll/200) + "px)" }); }); $(document).ready(function () { var img = $('.image-1'); $(window).scroll(function(){ if ($(window).scrollTop() > 400) { img.fadeOut(); } else { img.fadeIn(); } }); }); $(window).scroll(function() { var scroll = $(window).scrollTop(); $(".image-2").css({ transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')', //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments //"-webkit-filter": "blur(" + (scroll/200) + "px)", //filter: "blur(" + (scroll/200) + "px)" }); }); $(document).ready(function () { var img = $('.image-2'); $(window).scroll(function(){ if ($(window).scrollTop() > 1200) { img.fadeOut(); } else { img.fadeIn(); } }); }); $(window).scroll(function() { var scroll = $(window).scrollTop(); $(".image-3").css({ transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')', //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments //"-webkit-filter": "blur(" + (scroll/200) + "px)", //filter: "blur(" + (scroll/200) + "px)" }); }); $(document).ready(function () { var img = $('.image-3'); $(window).scroll(function(){ if ($(window).scrollTop() > 800) { img.fadeOut(); } else { img.fadeIn(); } }); }); 
 body{ height: 6000px; width: 80%; } .image-4, .image-5, .image-6, .image-7{ width: 450px; height: 300px; } .image-2{ position: fixed; top: 30%; left: 60%; width: 20%; height: 25%; } .image-3{ position: fixed; top: 30%; left: 40%; width: 20%; height: 25%; } .container{ display: flex; } .image-1{ position: fixed; top: 30%; left: 50%; width: 30%; height: 35%; transform: translate(-50% -50%); -webkit-transform: translate(-50% -50%); -moz-transform: translate(-50% -50%); -ms-transform: translate(-50% -50%); -o-transform: translate(-50% -50%); } .first-block{ position: relative; z-index: 20; } .second-block{ position: relative; z-index: 15; } .image-4{ } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="main.js"></script> </head> <body> <div class="container"> <div class="first-block"> <img class="image-1" src="https://image.freepik.com/free-photo/pro-photography-equipment_1426-1771.jpg" alt=""> </div> <div class="second-block"> <img class="image-2" src="https://image.freepik.com/free-photo/smiling-young-woman-holding-flower-bouquet-hand_23-2148066878.jpg" alt=""> <img class="image-3" src="https://image.freepik.com/free-photo/portrait-cheerful-young-woman_23-2148066871.jpg" alt=""> </div> </div> </body> </html>

1 answers

solution1
 0  2019-03-12 06:42:10

Check this css solution for the classes contains image- it will center align all the images before document ready. That's it! 

 $(window).scroll(function() { var scroll = $(window).scrollTop(); $(".image-1").css({ transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/6)/100+')', //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments //"-webkit-filter": "blur(" + (scroll/200) + "px)", //filter: "blur(" + (scroll/200) + "px)" }); }); $(document).ready(function () { var img = $('.image-1'); $(window).scroll(function(){ if ($(window).scrollTop() > 400) { img.fadeOut(); } else { img.fadeIn(); } }); }); $(window).scroll(function() { var scroll = $(window).scrollTop(); $(".image-2").css({ transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')', //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments //"-webkit-filter": "blur(" + (scroll/200) + "px)", //filter: "blur(" + (scroll/200) + "px)" }); }); $(document).ready(function () { var img = $('.image-2'); $(window).scroll(function(){ if ($(window).scrollTop() > 1200) { img.fadeOut(); } else { img.fadeIn(); } }); }); $(window).scroll(function() { var scroll = $(window).scrollTop(); $(".image-3").css({ transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')', //Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments //"-webkit-filter": "blur(" + (scroll/200) + "px)", //filter: "blur(" + (scroll/200) + "px)" }); }); $(document).ready(function () { var img = $('.image-3'); $(window).scroll(function(){ if ($(window).scrollTop() > 800) { img.fadeOut(); } else { img.fadeIn(); } }); }); 
 body{ height: 6000px; width: 80%; } .image-4, .image-5, .image-6, .image-7{ width: 450px; height: 300px; } [class*="image-"] { transform: translate3d(-50%, 0%, 0); } .image-2{ position: fixed; top: 30%; left: 60%; width: 20%; height: 25%; } .image-3{ position: fixed; top: 30%; left: 40%; width: 20%; height: 25%; } .container{ display: flex; } .image-1{ position: fixed; top: 30%; left: 50%; width: 30%; height: 35%; transform: translate(-50% -50%); -webkit-transform: translate(-50% -50%); -moz-transform: translate(-50% -50%); -ms-transform: translate(-50% -50%); -o-transform: translate(-50% -50%); } .first-block{ position: relative; z-index: 20; } .second-block{ position: relative; z-index: 15; } .image-4{ } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="main.js"></script> </head> <body> <div class="container"> <div class="first-block"> <img class="image-1" src="https://image.freepik.com/free-photo/pro-photography-equipment_1426-1771.jpg" alt=""> </div> <div class="second-block"> <img class="image-2" src="https://image.freepik.com/free-photo/smiling-young-woman-holding-flower-bouquet-hand_23-2148066878.jpg" alt=""> <img class="image-3" src="https://image.freepik.com/free-photo/portrait-cheerful-young-woman_23-2148066871.jpg" alt=""> </div> </div> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to manipulate transform: translate3d values with jQuery? Using jQuery to adjust “transform: translate3d” based on container width Issue with transform 3D jquery mousemove transform both x and y of 3d shape If element translate 3d … addClass 3D transforms (translate3D) appear to be causing sluggish jQuery animations on mobile devices CSS 3d Transform in IE jquery css transform translate reset Translate mouse coordinates to a 3D plan Jquery 3D rings
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM