1$(document).ready(function() { 2 3 // this is the adapter to use scrollmagic + anime by using classnames 4 5 /* manual 6 7 .scm â trigger element for a scene 8 .scm-target .ani-fade_from_down â 9 10 dependencies: scrollmagic, anime, jquery 11 */ 12 13 const anime_opts = {}; 14 15 anime_opts['fade_from_down'] = { 16 targets: '.xxxx', 17 opacity: [0, 1], 18 translateY: [60, 0], 19 scale: [0.8, 1], 20 delay: 0, 21 duration: 1400, 22 //delay: anime.stagger(100), 23 autoplay: false, 24 loop: false, 25 easing: 'easeOutExpo', // easeOutQuint easeOutExpo easeInOutExpo 26 }; 27 28 /*anime_opts['fade_from_down'] = { 29 targets: '.xxxx', 30 opacity: { 31 value: [0, 1], duration: 1000, easing: 'easeInOutCubic', 32 }, 33 translateY: { 34 value: [60, 0], duration: 1000, easing: 'easeInOutCubic', 35 }, 36 scale: { 37 value: [0.8, 1], duration: 1000, easing: 'easeInOutCubic', 38 }, 39 delay: 0, 40 //delay: anime.stagger(100), 41 autoplay: false, 42 loop: false 43 };*/ 44 45 // init scrollmagic scenes (blocks) 46 47 const control = new ScrollMagic.Controller(); 48 49 $('.scm').each((indx, elem) => { 50 51 // NOTE: $(this) is not working anymore ??? 52 53 let sub_target_i = 0; 54 let target = null; 55 56 // add unique identifiers 57 let trigger_classname = 'scm-' + indx; 58 $(elem).addClass(trigger_classname); 59 60 let target_classname = 'scm-target-' + indx; 61 if($(elem).hasClass('scm-target')) { 62 target = $(elem); 63 target.addClass(target_classname); // + '-' + sub_target_i 64 sub_target_i++; 65 } 66 else { 67 target = $(elem).find('.scm-target'); 68 target.addClass(target_classname); 69 sub_target_i++; 70 } 71 /*$(elem).find('.scm-target').each((ix, el) => { 72 $(el).addClass('scm-target-' + indx + '-' + sub_target_i); 73 sub_target_i++; 74 });*/ 75 76 // select anime opts and init anime 77 let ani_handle = target.attr('data-anime'); 78 anime_opts[ani_handle].targets = '.' + target_classname; // optimizing/manipulate anime options 79 let ani = anime(anime_opts[ani_handle]); // init animation 80 81 let ani_num = target.attr('data-blend-num'); 82 83 let scene = new ScrollMagic.Scene({ 84 triggerElement: '.' + trigger_classname, 85 duration: '100%', // the scene should last for a scroll distance of 100% 86 offset: '-150%' // start this scene after scrolling 87 }); 88 89 // only if superuser 90 if($('.main').hasClass('su')) { 91 scene.addIndicators({ 92 colorTrigger: "black", 93 colorStart: "blue", 94 colorEnd: "red", 95 indent: 10 96 }); 97 } 98 99 scene.on('start', function (event) { 100 console.log('on start', event.scrollDirection); 101 if(ani_num === 'in_out') { 102 if(event.scrollDirection === 'FORWARD'){ 103 ani.direction = 'normal'; 104 if (ani.began) { 105 ani.play(); 106 if (ani.progress === 100 && ani.direction === 'normal') ani.completed = false; 107 } 108 if (ani.paused) ani.play(); 109 //ani.direction = 'normal'; 110 //ani.play(); 111 } 112 if(event.scrollDirection === 'REVERSE'){ 113 // reverse handling is fucking hard 114 if (ani.began) { 115 ani.reverse(); 116 if (ani.progress === 100 && ani.direction === 'reverse') ani.completed = false; 117 } 118 if (ani.paused) ani.play(); 119 } 120 } 121 else { 122 ani.play(); 123 ani.finished.then(() => { ani.remove('.' + target_classname); }); 124 } 125 }); 126 //.setPin('#my-sticky-element') // pins the element for the scene's duration 127 scene.addTo(control); 128 129 }); 130 131 132 133 $('.anim-banner').each((idx, el) => { 134 135 // NOTE: $(this) is here not working 136 137 let active_fxs = 0; 138 139 // add unique identifiers 140 let trigger_classname = 'anim-banner-' + idx; 141 $(el).addClass(trigger_classname); 142 143 let target_bgimg = null; 144 target_bgimg = $(el).find('.imglayer1'); 145 let target_text = null; 146 target_text = $(el).find('.textlayer1'); 147 let target_img = null; 148 target_img = $(el).find('.imglayer2'); 149 150 let scene = new ScrollMagic.Scene({ 151 triggerElement: '.' + trigger_classname, 152 duration: '200%', // the scene should last for a scroll distance of 100% 153 offset: '-150%' // start this scene after scrolling 154 }); 155 156 // only if superuser 157 if($('.main').hasClass('su')) { 158 scene.addIndicators({ 159 colorTrigger: "black", 160 colorStart: "blue", 161 colorEnd: "red", 162 indent: 10 163 }); 164 } 165 166 if (target_bgimg.attr('data-fx-bgimg') == 'scale_by_scroll') { 167 active_fxs++; 168 let text_blur = 'on'; 169 target_text.css('filter', 'blur(50px)'); // set on init 170 target_img.css('transform', 'translateX(10%)'); // set on init
171 scene.on('progress', (scroll) => { 172 target_bgimg.css('transform', 'scale(' + (scroll.progress + 1) + ')'); 173 if (text_blur = 'on' && scroll.progress >= 0.2) { 174 target_text.css('filter', 'blur(0px)'); 175 text_blur = 'off'; 176 } 177 if (text_blur = 'off' && scroll.progress < 0.2) { 178 target_text.css('filter', 'blur(50px)'); 179 text_blur = 'on'; 180 } 181 target_img.css('transform', 'translateX(' + (10 - (scroll.progress * 30)) + '%)'); 182 console.log('scroll.progress', scroll.progress); 183 }) 184 } 185 186 187 //.setPin('#my-sticky-element') // pins the element for the scene's duration 188 if (active_fxs > 0) scene.addTo(control); 189 190 }); 191 192 193 /* 194 195 new ScrollMagic.Scene({ 196 triggerElement: "#trig3box", 197 duration: '100%', // the scene should last for a scroll distance of 100px 198 offset: '-100%' // start this scene after scrolling for 50px 199 }) 200 .addIndicators({ 201 colorTrigger: "black", 202 colorStart: "blue", 203 colorEnd: "red", 204 indent: 10 205 }) 206 .on('start', function (event) { 207 console.log('start event.scrollDirection', event.scrollDirection); 208 if(event.scrollDirection === 'FORWARD'){ 209 ani_01.direction = 'normal'; 210 ani_01.play(); 211 } 212 if(event.scrollDirection === 'REVERSE'){ 213 ani_01.direction = 'reverse'; 214 ani_01.play(); 215 } 216 }) 217 .on('progress', (scroll) => { 218 ani_box1.seek(scroll.progress * 500); 219 ani_box3.seek(scroll.progress * 500); 220 }) 221 /!*.on("start end enter leave", function (event) { 222 //console.log('event', event); 223 //ani_01.remove('#trig3box .icon-teaser'); 224 })*!/ 225 //.setPin('#my-sticky-element') // pins the element for the scene's duration 226 .addTo(control);*/ 227 228});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.