I found this awesome effect on codepen and I want to implement this effect on my own website on the background.
But the problem I have to face here is that the background image get set by wordpress and a plugin called visual composer. At the background image gets set as css backgorund image and not as an <img> div. But the code you see above on codepen.io is dealing with an <img> div.
So, I want to transfer and customize this code for my website to get it working there. The <div> in which you can find the background image on my website where I want to appear this effect is called ``. You can get the <div> of it by typing this in your console:
document.getElementsByClassName("vc_custom_1493329568717")
I already tried to recreate this effect on a local level. But I only could do it with an <img> div. So, here is my question. Does anybody has an idea, how I can transfer this effect to my website?
I would be very happy about an idea or an answer.
Kind regards and Thank You!
Related
I'm kind of new to this and couldn't find any solutions so far that works.
I want to achieve the effect present on the images here: http://www.apple.com/macbook/
When the user scrolls down, the image is going up and vice versa. I took a look into their javascript files (line 28928 in overview.build.js), found the lines that do this but couldn't understood it exactly.
On my website when I want to use this effect I have the image inside a div container as img tag, but I can also place it as background-image.
Thank you for yor time!
I think what you are referring to is a parallax effect. There are a wide variety of jQuery plugins to achieve this effect.
The plugin that I use:
https://github.com/jalxob/cool-kitten
You can find tons of other options by googling "parallax effect"
everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/
I am using the Elastic Image Slideshow script, and would like to add data-caption text for each image, then display the text of the currently shown image into a div, outside of the slideshow (basically in a different section of the page.)
I found this script, to work with jQuery cycle, and tried to modify it to work but I am not having much luck.
Ok, I found this fiddle: http://jsfiddle.net/Snfst/6/ and modified it down to this:
$('img').hover(function(){
$('#caption').html($(this).data('caption'))
});
Question now is how do I get it to load without having to hover over the image, and only show the data for the currently shown image?
The page that I'm trying to make this work on might better show what I'm trying to do:
http://diguiseppi.com/Brad/Andy/portfolio-web-design.html
When you look at the results on the google search page, you can see the google plus one button animation when you hover over the link or link description for every result.
I was searching internet but was not able to find any tutorial how to achieve this effect on a image or element in general.
Any suggestion or link to tutorial using jquery?
Thanks in advance.
It is one image containing multiple frames. I assume The image is used as background via CSS and the background position is changed rapidly (through JavaScript) to create the animation effect.
The image is:
I'm searching a javascript that can resize images similar to script thats available as a plugin in vBulletin CMS:
I want the script to be used in blogger blog so that all images i upload into a post are resized to a smaller res and on clicking the image should be displayed in original dimensions
Something of the sort getelementbyID("img").
are there any script providing this feature? Pls help me out
Thanks in advance.
Something like a lightbox, perhaps?
I know the specific interaction you're asking about, and personally, I've always found it really obnoxious.
If you don't want to use a server side script to automatically create a smaller version of the image that you would link to the larger version, I wouldn't recommend using JavaScript to resize an image either. I'd recommend setting the image's dimensions in CSS and then attaching a click handler with JS that showed the image in some sort of overlay (or just using HTML to link to the larger image file).