how to make images in slideshow appear disintegrating - javascript

So I just got my first actual web design job after a 4 months being out of school, and trying to get back to my coding brain. My client wants to have a slideshow on the index page, which I have already created. They have asked if I could make it look like the image is disintegrating as the slide moves to the next one, and saw this effect on another website. I am thinking that is may be a javascript that does this? I cannot see it as an animation or transition... so any help would be great. Or any kind of unique effect for the images in the slideshow would be great. The website itself is fairly basic, and so it would be nice to add some effects to make it look more modern. Thanks in advance!

Try the "Effect" options in the jQuery UI (User Interface) JavaScript library.
I'm not sure which "Effect" option is equivalent to "disintegrating", perhaps "Fade" or "Puff".

Related

Make header smaller when not-homepage opened?

I have this website; http://kieronboz.co.uk/inspired/
Im a beginner to web design, so forgive me :P
If you click on the top link in the ugly navigation bar on the left, a new page is loaded, I thought it might be a good idea to now shrink the header image for the non-main pages, so I was thinking a jquery script to make it 'slide' up when the page is loaded, to the top of the light white border around Inspired Marketing, so it would turn into a smaller header!
Anyway, problem is I cant find anything like this in google, I have seen the jquery slideup function but im having trouble implementing it in such a naked fashion as the code reference sheets present it.
If this is a terrible idea and there's better options, ill hear those too! Thanks again
Simply add to the header the margin-top: -540px; (or via jquery: $("#header").css("marginTop","-540px");
You may use jquery.animate to add an animation to it.
As to doing it only on pages that are not the index - Either include the script doing it only to non-index pages, or use document.location.href to figure out whether you're on index or not.

Parallax, as a homepage banner

This is a very vague question, but I am not sure where to start, so if anyone could give me some idea, that you be great.
I want to have a Parallax effect on the homepage of my website, but I am unsure how to create this effect. The effect I want is crated here http://davegamache.com/chase-happiness/ and here http://themetrust.com/demos/hero/. They both use a similar principle to where as you scroll down the image and text move at different speed and fade out.
So basically my question is, does anyone know where I should start to create this or any download you can get which creates the effect.
Thank you for any help
Looks not that difficult, just look in their sourcecode at: http://themetrust.com/demos/hero/wp-content/themes/hero/js/theme_trust.js
At the bottom there is a section named: Parallax

Jquery fading images with lazy loader for multiple slides

I have used stackoverflow for the past year and has really helped for design, this is the first time im truely stuck and I really dont have a clue have to do this...
I have a website im building which has 60 items on a page with thumbs, On mouseover I want the thumb to to change to 5 other img like a fast slideshow, using lazy loader so the alternative img's don't load until mouseover
I have just started learning Javascript and Jquery in my spare time, and unfortuantely this is way beyond my capabilities :(
I have this http://jsfiddle.net/razzabazza17/hRErs/ but this is just to load when scrolling what I need is this to overflow: hidden; around the container then when mouse over on primary img it will flick through the other 4 thumbs in sequence. It also need to stop this function when stop on mouseover.
I appreciate any help or advice you can give, thanks in advance :)
Have you tried this jQuery plugin?
http://www.appelsiini.net/projects/lazyload
Sounds like it's what you are after, the implementation looks pretty simple

How to make a div update the content with a sliding effect (animation similar to flash)?

Could you please tell me how this photo animation effect is achieved - see the pictures that slide seamlessly to the left every say 3 seconds (the pictures just below the BIGSTOCKPHOTO logo).. Site- www.bigstockphoto.com
I have noted this effect being used in many other sites.. And none of them seem to employ flash for making this. Please let me know whether this is just JS or whether its purely a CSS based effect, and probably a place where i can read on how to make this.
Thanks.
here you go..
example:
http://cssglobe.com/lab/easyslider1.7/01.html
info:
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

Looking for simple slideshow with previous and next navigation

I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.

Categories