Search the Community
Showing results for tags 'background image'.
Found 5 results
-
Hi community, once again I wanted to use your universal and broad wisdom. I have multiple sections following each other with different heights and each of them can have a background image. This implemented as a direct child, is positioned absolute, has the size of the section and, of course, has a background-image set. This image's position can vary, depending on what the user selected in the backend. What is now relatively tricky for me is to use each section as the actual container where the bg image parallaxes in. So not the whole window but only the current section's height should be used. I found this demo this demo to start off with: https://codepen.io/GreenSock/pen/QWjjYEw and I adjusted it to the version you see now at the end of the post. My questions now are: 1. How can this work with multiple sections as the reference container? 2. How can this work with different bg positions? 3. Why do I need the ratio calc in there' Wouldn't the acutal height of the section suffice? Hope it's clear what my problem is and looking forward to your ideas! Have a nice one!
-
Hi, I am new in GSAP, I want to create a section where text will change by animate along with background image. Please check link below and go to section which is in screenshot. You can check this section after visit on link below. Thanks in Advance! https://www.nicolenero.com/
-
As you can see in my codepen code there is a image and I want to fixed its position center in the section. When scrolling down it will follow the scroll. When the following section comes up there will be a parallax effect. That means image will stick at the bottom of that section and following sections going up over the image. Here is a simple example. Like the form on that website, I want my image but in the center of viewport. If you don't understand please let me know. -
Hi, I am looking to change the background images after each animations like in the CodePen. As you can see that 1st background Image is appeared then the 2 boxes are also animated and then the background image fades out from the page. Until there it is working fine. But after the 1st background is disappeared then the 2nd background image is not appearing before the 2 boxes animation starts again. How can I achieve this kind of thing? Thanks in Advance
-
Hi! I was wondering, I have a btn like this: #my_btn { background-image: -moz-linear-gradient(top, #3e3e40, #252122); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #3e3e40), color-stop(1.0, #252122)); background-color: #DDDDDD; } How can I animate the background gradient on roll over? I tried the code below but it doesnt work. var mybtnOnOver = $('#my_btn'); mybtnOnOver.hover(function() { //mouseover TweenLite.to($(this), 1, { css:{ backgroundImage: '-moz-linear-gradient(top, #ACAC8F, #ACAC8F)' } }); },function() { //mouseout TweenLite.to($(this), 1, { css:{ backgroundImage: '-moz-linear-gradient(top, #3e3e40, #252122)' } }); }); In general where can I find the css properties that are supported? Thanx a lot for any answers! Cheers!
