Jump to content

Search the Community

Showing results for tags 'Parallax'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 4 results

  1. Hello everyone. I am new to this forum. I have build my first parallax website based on Petr Tichy's very good tutorial. I recommend it (https://ihatetomatoes.net). Here is my new site. The idea was to get an attractive intro for this new project using altered-perspective images in full width. http://www.ticket2utopia.com/Alpha/zHome.php I struggle a bit especially that I want to control the ratio of the images in a certain way. They must always be full page but depending on the width of the browser window, I apply a certain correction to the height. As the whole project is about "changing your perspective"... it's great... IMO. However, I would like to change the height of the picture when the browser window is square or taller than wide. I have tried so many different things... but nothing does not work. The problem is that the background-attachment must be fixed to work with parallax and I can not change that. At the moment I just resize the browser window to the ratio of the image (16/9) but this is not ideal at all. I control the situation when the browser window is wide, but in the case it's not I would like to force the image to its exact ratio... Any idea? There is also a section at the bottom of the page (#20 - visual meditation) which I can not control properly... the text box should fade in and out later. I used the code : data-100-top="opacity: 1" data-center="opacity: 1" data-center-top="opacity: 0" data--100-bottom="opacity: 0;" data-anchor-target="#slide-20". What should be changed to achieve that? Greetings from Cape Town, Paul
  2. This would be quite a simple issue for someone more experienced: (I have just begun with Jquery and Javascript)I have coded a really simple HTML, CSS, Jquery animation.. The ball <div> moves from side to side (Pretty Damn COOL!) BUT... I need to try and trigger the animation with scrolling, basically creating a 'Pong' game. From one side of the scren to the other. HOW do I do this? I have been trying to find a sollution online and can't. Please help, or I will find you and kill you. <!DOCTYPE html><html> <head> <title> Pong </title> <style type="text/css"> .pong{ position: relative; border-radius:100%; top:250px; float:left; z-index: 1; width: 100px; height: 100px; transition-property: transform, -webkit-transform; transition-duration: 0.2s; transition-timing-function: ease-out; background-color:#FFF700; } #stage{ min-height:500px; min-width:500px; background-size:cover; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function () { move(); }); function move() { $(".pong").animate({ left: 900 }, { duration: 5000, complete: function () { $(".pong").animate({ left: 40 }, { duration: 5000, complete: function () { move(); } }); } }); } </script> <script type="text/javascript"> </script> </head> <body> <div class id="stage"> <div class="pong"> </div> </div> </body></html> any help would be greatly appreciated.
  3. Hello, im now working on a parallax site,i script im using: //if the second section is in view... if($secondBG.hasClass("inview")){ //call the newPos function and change the background position $secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1550, 0.3)}); //call the newPos function and change the second background position goggles.css({'backgroundPosition': newPos(50, windowHeight, pos, 2000, 0.6)}); goggles_side.css({'backgroundPosition': newPos(50, windowHeight, -200, pos, 0.9)}); ringbox_01.css({'backgroundPosition': newPos(50, windowHeight, -300, pos, 0.6)}); ringbox_02.css({'backgroundPosition': newPos(50, windowHeight, -300, pos, 0.6)}); compass_1.css({'backgroundPosition': newPos(95, windowHeight, pos, 2200, 0.6)}); } But i want the objects to stop at a specific position rather than non-stop.eg: http://www.nikebetterworld.com/productThe objects have a landing ground. Thanks a lot
  4. I'm testing on parallax these days and i've found that my site runs normally on computer browser,but in ipad, only the first photo appears and the rest turn white. What should i do to fix this problem? http://ronaldcheung.zxq.net/testing/
×
×
  • Create New...