tun712

Members
  • Content Count

    16
  • Joined

  • Last visited

Community Reputation

0 Newbie

About tun712

  • Rank
    Member
  • Birthday January 21

Profile Information

  • Gender
    Female

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. tun712

    Scroll to div on mouse scroll up/down

    @PointC Thanks Vertical https://codepen.io/tun712/pen/jRKWxb Horizontal https://codepen.io/tun712/pen/MRXKZp
  2. tun712

    Scroll to div on mouse scroll up/down

    @both Thanks ! 👍 Horizontal scroll is working with jquery 3.4. Need little help to add prev & next button for both horizontal demo. My code is not working, $(".btnPrev").on('click', function(e) { e.preventDefault(); goToPrevProject(); if (?????) { $(".btnPrev").addClass("hide"); } else { $(".btnPrev").removeClass("hide"); } }); $(".btnNext").on('click', function(e) { e.preventDefault(); goToNextProject(); if ((?????)) { $(".btnNext").addClass("hide"); } else { $(".btnNext").removeClass("hide"); } });
  3. tun712

    Scroll to div on mouse scroll up/down

    @both Thanks ! 👍 Horizontal is not tried yet, working on vertical. It's working with jquery 3.4. But I've little problem, I'm unable to add or remove class active to nav li a var $navButtons = $("ul.nav li a").filter("[href^=#]"); this is not working for me. Below is my code to add navigation, please check var navList = ""; $(".slide").each(function (i) { navList += "<li><a href='#" + (i + 1) + "' class='slide-" + (i + 1) + "'></a></li>"; }); if ($('ul.nav').length < 1) { $("<ul class='nav'></ul>").prependTo($(".slides-container").parent()); } $('ul.nav').html(navList); $("ul.nav li a").on('click', function (e) { e.preventDefault(); }); Now I've little simplified scrolling code to find out problem, please check below var $window = $("section"); var $navButtons = $("ul.nav li a"); var $slidesContainer = $(".slides-container"); var $slides = $(".slide"); var $currentSlide = $slides.first(); //Animating flag - is our app animating var isAnimating = false; //The height of the window var pageHeight = $window.innerHeight(); //Going to the first slide goToSlide($currentSlide); /**Adding event listeners**/ $window.on("mousewheel DOMMouseScroll", onMouseWheel); /**When user scrolls with the mouse, we have to change slides**/ function onMouseWheel(event) { //Normalize event wheel delta var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail; //If the user scrolled up, it goes to previous slide, otherwise - to next slide if (delta < -1) { goToNextSlide(); } else if (delta > 1) { goToPrevSlide(); } //event.preventDefault(); } /**If there's a previous slide, slide to it**/ function goToPrevSlide() { if ($currentSlide.prev().length) { goToSlide($currentSlide.prev()); } } /**If there's a next slide, slide to it**/ function goToNextSlide() { if ($currentSlide.next().length) { goToSlide($currentSlide.next()); } } /**Actual transition between slides**/ function goToSlide($slide) { //If the slides are not changing and there's such a slide if (!isAnimating && $slide.length) { //setting animating flag to true isAnimating = true; $currentSlide = $slide; //Sliding to current slide TweenMax.to($slidesContainer, 1, { scrollTo: { y: pageHeight * $currentSlide.index() }, onComplete: onSlideChangeEnd, onCompleteScope: this }); TweenMax.fromTo(".title span:nth-child(even)", 1, {y: "50%",opacity: 0}, {ease:SlowMo.ease.config( 0.4, 0.4),y: "0%",opacity: 1}); TweenMax.fromTo(".title span:nth-child(odd)",1, {y: "-50%",opacity: 0}, {ease:SlowMo.ease.config( 0.4, 0.4),y: "0%",opacity: 1}); } } /**Once the sliding is finished, we need to restore "isAnimating" flag. You can also do other things in this function, such as changing page title**/ function onSlideChangeEnd() { isAnimating = false; } Is it possible to convert nav li a into, <div class="nav"> <div class="slide-1">Slide 1</div> <div class="slide-2">Slide 2</div> <div class="slide-3">Slide 3</div> <div class="slide-4">Slide 4</div> </div>
  4. tun712

    Scroll to div on mouse scroll up/down

    https://codepen.io/tun712/pen/ZZrvVR
  5. tun712

    Scroll to div on mouse scroll up/down

    @ Mikel Hey Mikel, Thanks a lot, you tried with jquery 3.4. I've not tested it with my code yet, but I'll check it. I was working with your previous code for Horizontal slider Is it possible to help with this? https://codepen.io/anon/pen/ZZrvVR
  6. tun712

    Scroll to div on mouse scroll up/down

    Thanks Just one problem, how to make it work with jquery-3.4 ?
  7. tun712

    Scroll to div on mouse scroll up/down

    It's like following , <span>H</span> <span>E</span> <span>L</span> <span>L</span> <span>O</span> <span>T</span> <span>H</span> <span>E</span> <span>R</span> <span>E</span>
  8. tun712

    Scroll to div on mouse scroll up/down

    I have 10 <span> elements on each slide. How to animate even & odd elements on scroll complete? For e.g. On scroll complete animate even <span> from top to center & odd <span> from bottom to center
  9. tun712

    Scroll to div on mouse scroll up/down

    @both Thanks @mikel I'm using jquery-3.4.0.min for my other code, Fullscreen slides with GSAP code is not working with jquery-3.4 @PointC In your Horizontal full-screen slider how to hide previous - next arrows for first & last slide? Using both sliders for my project, thanks.
  10. tun712

    Scroll to div on mouse scroll up/down

    check following link, one page scroll I'm trying to create something like this, as I have many animations as per clients needs. Go from one section or div to other with single mouse scroll, it may be upwards or downwards .
  11. Need help to scroll when mouse wheel is used. Scroll Up or Down as per mouse action. I'm trying to create moveUp() & moveDown() function, to scroll according mouse wheel action On scroll, remove class of current div :- .active and add class :- .active to scrolled div (div in viewport), by default first div has class .active.
  12. tun712

    How to create seamless loop of svg rect

    Perfect!!! Thanks a lot 😗
  13. tun712

    How to create seamless loop of svg rect

    Thanks for reply. I've done this using your code, but I was trying to do something like in image Three elements moving in rectangular path one after each other. In image there is black border, which is path and three red lines are elements - suppose snakes - chasing each other , moving around path
  14. tun712

    How to create seamless loop of svg rect

    Thanks Gone through your post but, as I'm very new to GSAP I've difficulties in creating animation. I want to create very simple animation. I've created here , would you please edit it? Would you like to help me to create animation? Also I found another example here : https://codepen.io/GreenSock/pen/qEdoRE
  15. I'm trying to create seamless loop of animated border. svg rect is moving in rectangular path but it stops for a while before repeating The example can be seen here: https://codepen.io/anon/pen/qMJENG It should work like this, https://codepen.io/anon/pen/VGEYEa Here’s an example for different shape