Comments (7)
Hi, you could do something like this:
1.) Create a new dom-element for implementing scrolling, ex.:
Scroll on me
2.) Then tell this element to scroll when the user hovers it:
var timer = false;
$('.fix').on('mouseenter', function(e) {
timer = window.setInterval(function() {
var scrollTop = $('html, body').scrollTop() + 20;
console.log(scrollTop);
$('html, body').animate({'scrollTop': scrollTop}, 0);
}, 30);
}).on('mouseleave', function(e) {
window.clearInterval(timer);
});
You can extend this example by implementing check if the user reached the end of the page, or, if you want two arrows, one for up and one for down, add a direction flag variable.
Let me know if this did it or you need more help!
Best regards
from jinvertscroll.
Hey thank you, I'll check the code.
However I would like to make a few notes on features request.
- Let users to create scenes wrapped inside stage Div.
- In each scene, we can animate parallax elements with background images.
- Users can use background parallax as you showed in the example files, unless there are no elements in a scene to be animated.
- animations frame works like Animo.js or http://ricostacruz.com/jquery.transit/ to build custom animations.
Onscroll if the object is in view-port addClass animate to animate particular element. (user can write their own csss animations).
<div class="fly-left">this is user defined element </div>
When it's in view-port add class to animate it.
<div class="animate fly-left">object animated </div>
example:
<div id="stage">
<div class="scene0">
<div class="bg-scene1>
<img src="example1.jpg" data-speed="1000" data-name="scroll">
<img src="example2.jpg" data-speed="1000" data-name="scroll">
</div>
<div class="contents">
<h2>Some text contents to scroll over bg-scene1 parallax</h2>
</div>
</div>
<div class="scene1">
<div class="bg-scene1>
<mg src="example1.jpg" data-speed="1000" data-name="scroll">
<img src="example2.jpg" data-speed="1000" data-name="scroll">
</div>
<div class="contents">
<h2>Some text contents to scroll over bg-scene1 parallax</h2>
</div>
</div>
I hope these options will be useful and make jInvert a complete framework for HoriztParallax.
from jinvertscroll.
we should have function like onScroll scene-complete(), onSceneLoad(), onSceneCompletion() so on
from jinvertscroll.
Hi, thanks for your opinion and suggestions,
the first thing however will be to implement the dynamic menu (to let users jump automatically to a certain slide without having to set the waypoints manually) =)
Regards
from jinvertscroll.
How to enable smooth scroll across all the browsers? The script has little lag while scrolling the page using mouse and the page doesn't look like smooth scroll enabled.
from jinvertscroll.
I've seen smooth scrolling in other scripts done with css3 + js-delay, so that you scroll down with the mouse and afterwards it starts scrolling via css-transitions, but it is quite laggy, obviously also smoother.
In wich browser on wich Os have you seen noticable lags?
from jinvertscroll.
I observed it on Windows7 OS, google chrome browser. I will check it with css3 + js-delay. Thanks
from jinvertscroll.
Related Issues (20)
- working with jQuery v1.11.1 HOT 5
- Typo on website HOT 3
- Start scrolling at a given point only HOT 6
- How to implement waypoint horizontal navigation with jInvertScroll ? HOT 15
- Bower package HOT 1
- Callback Function on init HOT 2
- Different "Scenes"
- How to fix on mobile ? HOT 9
- anchors issue
- Creating 'Next' and 'Prev' links
- Start scroll in middle of page
- how to 'stop' the inverse scroll HOT 1
- How do I vertical align my content? HOT 1
- Scroll Bar position HOT 3
- how to implement it in wordpress HOT 1
- Body Height HOT 1
- Mouse click and drag to scroll
- Elementoffset scroll to the center of the element
- Slow performance on ipad HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jinvertscroll.