How I achieve an effect like Janne.me ?
When you scroll the page a background image come up, but then the image stop and just the content text continue scrolling, then, when the content text scoll up, another image starting coming up with her paragraph.
Any Idea on how i could "stop" the image for a certain "time"?
Thanks
This effect is called parallax. There are several good libraries that can help you do this:
ScrollMagic: https://github.com/janpaepke/ScrollMagic (requires jQuery I believe)
rellax: https://github.com/dixonandmoe/rellax (vanilla js)
react-parallax: https://github.com/RRutsche/react-parallax (if you're using React)
Alternatively this can be done with pure CSS, as the ever awesome David Walsh has outlined here: https://davidwalsh.name/parallax
Hope this helps!
Related
I have a web page with anchor links and I wish for them to stay highlighted when they are clicked AND when the user manually scrolls down. I have seen some jquery code here codepen.io/jakob-e/pen/mhCyx that does what I wish to do, however I wish to achieve this effect using raw javascript and I can't see it posted anywhere. Thanks for any help.
Sounds like you're looking for animated scrolling and scrollspy functionality? Shameless plug for two native JS (non-jQuery) scripts I wrote that are designed to work together:
Smooth Scroll: https://github.com/cferdinandi/smooth-scroll
Gumshoe for scrollspy: https://github.com/cferdinandi/gumshoe
new to coding in general, so I'm kind of at a loss. I have a simple typewriter effect jquery script AND another simple javascript/ CSS trick to overlay one font on top of another. I am trying to combine the functionality of the two. I have found two ways to overlay the fonts with javascript/css, but the issue I have is this.
When the page loads, the typing script starts and at the same time the script for the font overlay runs, and since the typing script is just getting started, the font overlay does not apply to the typed text. The ticker code i am using is at https://github.com/stephband/jticker and the javascript/css is from here http://jsfiddle.net/4xgdv/1/ with th js part looking like this
$('.doublefont').each(function() {
$(this).attr('content', $(this).html());
and using the css class "doublefont" and the :after selector to copy and overlay the text.
Not looking for someone to code it for me, just a place to start in where things should go during the recursion and an idea how the overlay would fit in would be nice.
This is really beyond me, but I thought of something I wanted to see and it wont leave me alone, so any help would be appreciated!
I wrote the script for overlay text in this site and it's full open source.
try it:http://www.drabc.ir/
Is it possible to make scrolling clouds with Flash, jQuery or JavaScript? If yes, could you please give me code, that I would need to insert in homepage?
I got 3 small cloud images, and I need to make them move on the background, they should be under content, but over body, for example I got content (margin: 0 auto; (in middle) where text is located e.c.), and body image (sky and grass on the ground), the clouds should fly horizontally, is that possible to make?
Yes it is possible. This demo show the result you're looking for: jQuery scrolling background If you want to go through the tutorial you can read it here: Create Background Scrolling Effect with jQuery
I was looking to create an image gallery in my blog. However, I was wondering how possible it would be for the gallery to scroll through my images on mouseOver. Basically, when the user moves his/her mouse up or down the image gallery, the images scroll up or down accordingly.
I have seen a few examples where it has been done in flash, but i was wondering if it was possible for it to be done in Javascript. An example of what I am talking about can be seen on deep.co.uk. This example is constructed in flash and allows the user to skim through the agency's portfolio by moving the mouse up and down the div. I am aware that loads of free javascript alternatives are online, but i haven't managed to find anyone that does it on mouseOver. I would appreciate it if someone has come across something like this or has used something like this in one of their projects.
Thanks in advance.
Yours sincerely,
Seedorf
Maaki has i nice version here:
http://www.maaki.com/thomas/SmoothDivScroll/
supports mouse hot spot scrolling, and auto start/stop
Here is a script which scrolls content vertically onMouseOver.
http://www.dyn-web.com/code/scroll/demos.php
I m have thumbnail images in a table and on mouseover the image i should get as blow up and on mouseout it should be normal thumbnail. and i even need to navigate on clicking the Blowup image.
plz guide me with the code of how to do it using javascript or using CSS
I need some thing as in this website : link text
Have a look at the jQuery Plugins, you could probably configure the ThickBox plugin?
Or a pure CSS implementation, doesn't work on IE6 though.
CSS Light Box
question: do you have two pics? One for thumbnail one for enlarged pic? or only one image that changing size?
do u want it gradually maximize or instantly become large?
For 1st case, just do:
function mouseOverFun() {
document.getElementById('imageName').src = "largeImage.jpg";
} // just do the reverse for mouseOut event.
for 2nd case, if it enlarge gradually, look at jQuery.
if not, just change the element size.
jQuery, or any other Javascript library has a host of things you could use to make a fancy gallery.
Try this site:
http://flowplayer.org/tools/index.html
Take a look at the demos pages; excellent ideas for what you're looking for.