I wanted to screencapture this website (https://www.omegawatches.com/planet-omega/60th-anniversary-speedmaster/broad-arrow-1957), like seen in this video (https://youtu.be/lncVkWFyR38?t=21).
Problem is, that the site is somewhat strangely designed and seems to capture scroll inputs and translate them onto objects. e.g. arrow up / down does not work at all.
Can anybody figure out something to be able to produce some animated smoothly scrolling effect like seen in the video?
thanks a lot for any suggestions
all known methods of scrolling with vanilla js and jquery. nothing works, since the website translates any scroll input to a custom function that alters the position of various elements
Related
I'm trying to replicate this scrolling effect as seen here: http://prm.ooo.
In which the image elements flip and rotate continuously on a scroll as it enters and exits the page, I know this requires jquery/javascript and not just CSS alone.
So far I am able to rotate an image while scrolling.
Does anyone know how I can achieve this?
Here is the code: http://prm.ooo/wp-content/themes/prmo/main.js you can look at the source of any page and try and figure out how they did things. People also use plugins like scrollorama for this type of thing
For the front-end of one of the eCommerce sites I'm designing, I'd like to simulate an effect shown in the following: Qards Theme
I think I understand how to setup smooth scrolling anchors, but I need someone to show me the code for triggering the event of smooth scrolling to div classes, as a result of the user scrolling up/down.
It would be helpful if someone could identify the name of the effect, shown in the Qards Theme, as there is likely online reference material. In fact, I'd like to hand-code an almost exact replica (hopefully more lightweight) of the Qards theme (with my own text, images), but I guess this is a good place to start.
Disclaimer: New to HTML, CSS, and JS, kindly leave //explanatory comments with any code.
I am looking to implement some Mobile Components using native Javascript and AngularJS.
While, I was working on creating a Pull To Refresh directive for AngularJS, I used touchmove event on a UL list. I was trying to pull a hidden div on top of a list with custom models to show status message.
I used touchmove event on the UL to create an effect of pulling by changing CSS3 translate property for the div. I was facing issue that the transition was happening after I finish touching the screen but not while I was dragging my touch.
Please help and throw in more details about the touchmove event.
Touch events
First of all, if you work on mobile devices and know a little about javascript you should write your own functions for the specific things that you need.So don't use libraries like angular, jquery or whatever ... it's only performance loss.
all you need is:
document.addEventListener('touchstart',ts,false);
document.addEventListener('touchmove',tm,false);
document.addEventListener('touchuend',te,false);
& to test:
document.addEventListener('mousedown',ts,false);//set mouseISDown to true
document.addEventListener('mousemove',tm,false);//check if mouse is down
document.addEventListener('mouseup',te,false);//set mouseISDown to false
css
Use translate3d() as it activates the gpu hardware acceleration. not just translate()
As your question is not very specific i can't add more info right now but...
Here are some examples using touch/mousemoves they may help you
Swipe & fastclick
http://jsfiddle.net/uRFcN/
https://stackoverflow.com/a/17567696/2450730
Radial Menu
http://jsfiddle.net/yX82S/
Slider
http://jsfiddle.net/LxX34/11/
Some UI elements
http://cocco.freehostia.com/scripts/SnapLightMT%20v0.2%20by%20cocco%20(1).html
try to swipe the main content or mousedown drag left right.
code.
http://cocco.freehostia.com/scripts/highlight.html
There is also a css trick that allows you to use the native scroll without the annoyng whole page move..So you don't have to use a library to scroll.
css
.scrollable{-webkit-overflow-scrolling:touch;}
.scrollable,.scrollable>div{width:100%;height:100%;overflow:auto;}
.scrollable>div>div{min-height:101%;}
html
<div class="scrollable"><div><div></div></div></div>
in a project where I need to build something like the famous parallax-powered Mario Kart Wii Experience site, which also comes with horizontal and vertical scroll (if you haven't seen it, here it is: http://www.nintendo.com.au/gamesites/mariokartwii/#home)
For the scrolling effect, I grabbed the JQuery Scroll Path plugin (website here: http://joelb.me/scrollpath/), and it seems to suit my needs concerning the free scrolling.
The problem comes when I try to include some plugin to generate the parallax effect. I tried several plugins (including Stellar.js, jInvertScroll, Parallax.js, Parallax-JS), but none of them seem to work properly. I assume that there's some kind of relationship between the custom scroll that comes with the Scroll Path plugin and the need of the parallax plugins of working with the navigator scroll to make the effect work.
I searched in Google for some similar situation (i.e., implementing Scroll Path with some parallax plugin) but I didn't find anyone in my current situation, and it seems that the Scroll Path plugin isn't maintained anymore.
Any idea for making it work would be appreciated!
PS: Sorry for the grammar mistakes, I'm still in process of learning english.
To make 2 plugins working together you should understand how they work. Parallax effect is achieved with few layers that are moved with different speed - the closest to you moves fastest, the most distant moves slowest. Most of the parallax-effect plugins are based on scrollTop calculation - i.e. layers are moved depending on current scroll offset multiplied by delta-value (which differs depending on layer position).
In your case you should connect jQuery ScrollPath scroll event to parallax plugin. In ScrollPath you should generate scroll event (that will be handled by parallax plugin) in function scrollToStep (look at row 490 in jquery.scrollpath.js). To make calculations simplier you can use 'top' value applied to scrollbar * some delta (you should pick out delta value by yourself). Then in parallax plugin you should modify event handler that applies parallax effect from scroll/mousewheel to event you generate in ScrollPath plugin.
To connect 2 plugins together you should modify their code which means that you won't be able to easily update these plugins to newer version. You should make comments to all your changes in order to reapply them if plugins will be updated in future.
I'm building a very basic online application where you can take images from a toolbar (or some kind of storage box, since there will eventually be quite a few images) and drag and drop them onto a canvas. I'm new to web development, but I know how to do the drag and drop, I'm just looking for a way to make a toolbar and put images in it. Ideally, I'd like a box with a scrollbar.
This seems like it should be a pretty simple problem. Any help would be much appreciated!
The simplest way I ended up discovering was using
overflow: scroll;
in the CSS div containing the images.
Here's a very good and simple demonstration of the use of drag&drop in HTML5 :
http://html5demos.com/drag
Beware that it's easy to drag links (as in this demo) but it is not possible to drag any images that aren't inside links in IE9.
If you want a totally cross-browser solution, you'll have to revert to old solutions (track mouse down, move and up and set yourself the position of objects).
If you say you know drag&drop and just want a box with a scroll bar then check this: http://jqueryui.com/demos/slider/side-scroll.html