Visual-Q

Moderators
  • Content count

    192
  • Joined

  • Last visited

Community Reputation

252 Leader

About Visual-Q

  • Rank
    Advanced Member

Recent Profile Visitors

1,041 profile views
  1. Scrollmagic parallax + sidebar navigation

    Yikes... I'm not seeing any problems with any of my sites on my machine but I hope they aren't screwing up on other peoples. Should we start a thread for this to see if we can get more feedback on the issue?
  2. Scrollmagic parallax + sidebar navigation

    Seems to run ok on my imac, on Chrome 66 with Yosemite. Some choppiness on Safari but not too bad. Best performance on Firefox similar to Shaun.
  3. Scrollmagic parallax + sidebar navigation

    I'm not familiar with the jquery plugin but you should be able to wrap it in a timeout or find a debouncing function to prevent overscroll. I.e. prevent it from firing more than once per scroll. Shaun would know more about it maybe the plugin has a setting for debouncing?
  4. Scrollmagic parallax + sidebar navigation

    Great solution, @OSUblake should promote you to Vice President of the 'You May Not Need Scroll Majic' club. Performace is somewhat choppy, at least on my machine almost certainly due to animating the large background images, not the script itself, I'm curious has the community come up with any solutions/best practices for optimizing performance in this kind of situation?
  5. Scrollmagic parallax + sidebar navigation

    Here's an example of page piling from a previous discussion that uses scroll majic with pins that may help get you started.
  6. Scrollmagic parallax + sidebar navigation

    Here's are some tutorials from from Peter Tichy that will walk you through basic Scroll Majic use including a parallax tutorial that should get you pointed in the right direction and help you determine if Scroll Majic is the tool for you. https://ihatetomatoes.net/product/scrollmagic-101/?utm_source=GW&utm_medium=banner&utm_campaign=S101 banner demo
  7. Scrollmagic parallax + sidebar navigation

    It's a bit hard to tell what you are trying to achieve. The example you show is a nicely functioning slider but doesn't really indicate what you are trying to achieve with respect to parallax. By smooth parallax do you mean you don't want a slide to slide transition and want to scroll the DOM as normal with animations occurring during scrolling or do you want slide to slide scrolling as you have now with animation occurring inside the bounds of the slides? If you're not sure of the type of effect you want perhaps search parallax scrolling websites on google or codepen to find something you like. Perhaps then we could offer some more specific advice. Maybe someone else here can chime in with some examples?
  8. Scrollmagic parallax + sidebar navigation

    Fixing the sidebar should just be a css solution. position:fixed As far as parallax goes, there is more than one way to skin that cat and it will depend a fair bit on your Javascript skills. Scroll Majic and pins are used commonly for this type of thing, for more information you should visit the Scroll Majic site it has some examples. http://scrollmagic.io/examples/index.html Shaun had some very good solutions that are applicable to parallax recently in these posts. In the second @Shaun Gorneau created a script that links tween.progress to scroll position which has great potential for parallax effects and would be very flexible for changing and/or adding your own logic to. var scrollMax = $(document).height() - $(window).height(); $(window).scroll( function(){ var curScroll = $(window).scrollTop(); if( curScroll > 0 ){ rocketTween.progress( curScroll/scrollMax ); } }) If you search the forum I'm sure you'll find more examples.
  9. The code is certainly based on the I Hate Tomatoes tutorial. It seems to take you through the project fairly well I would suggest going through it again to make sure you have implemented it properly and contact author as Carl suggested. FWIW it appears the initial function 'init' looks for any slides that don't have the class 'active' and makes them invisible. At the start none of the slides have this class so they are all made invisible. Try adding class 'active' to first slide in the html on load may fix it. <li class="homeSlide slide01 active">
  10. Splittext and Denavagari

    Yeah I noticed they seemed to contain characters that looked like accents in latin languages. I figured the circles were some kind of default glyph indicating they were supposed to be combined with another character.
  11. Hopefully it will work out when the whole thing is finished. I used to use fullpage.js but I found it too restrictive ultimately in the way it scrolljacks the DOM and adds wrappers to things. In it's favour though it has a fairly robust set of callbacks that you can plug into to add your own logic.
  12. Pretty hard to tell from the description whether it's a problem with the code or you're overloading Chrome momentarily as Jack suggested. I'm curious does the subsequent animation on the offending images execute properly. Are these images within the viewport or likely to be during the initial animation that you are having difficulty with, if not perhaps you could defer loading them until after the animation is complete, or make them invisible so the browser doesn't have to calculate their appearance immediately.
  13. ScrollTo Plugin and ScrollMagic

    Although some of the prior examples look more robust here's an example from a discussion awhile back specifically using Scroll Majic and Scroll To plugin.
  14. I can understand this but assuming you are still having difficulties possible you could PM Jack or Carl about it with the example, then you wouldn't have to expose it publicly beyond Greensock's developers.
  15. What about if the first stagger is removed does the second one work. Almost sounds like some kind of selector conflict, though it's unusual that it would only affect Chrome and resolve itself after a short time.