Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    110
    Thanks
    23
    Thanked 0 Times in 0 Posts

    need help replicating this animated banner effect

    I tried downloading and replicating this animation effect in the banner but couldn't get it to work. The images are still called from the parent URL although i couldn't see it in the css and js files. I know the zomer.min.js carries the array of location of the images but i couldn't figure out how they did it.

    Code:
    http://visitbruges.be/
    I notice that the line 103 in the source is where it starts the animation effect:

    Code:
    <div id="sunmoon">
             <div class="star" id="s1"></div>
             <div class="star" id="s2"></div>
             <div class="star" id="s3"></div>
             <div class="star" id="s4"></div>
             <div class="star" id="s5"></div>
             <div class="star" id="s6"></div>
             <div id="sun"><div></div></div>
             <div id="moon"><div></div></div>
    </div>
    If i inspect elements using firebug, i can see the codes but i can't see it in the view-source. The js files doesn't look encrypted to me to decode it either.

    What should i do? Where am i going wrong? Any leads will be highly appreciated.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    That is pretty nifty and also pretty intricate. There are actually two JS files responsible here, one is zomer.min.js and the other one is script.min.js; and as the filenames indicate, the scripts are minified (compressed, to save file size). You can easily uncompress them with numerous online tools such as http://jsbeautifier.org/. In zomer there are actually a few file paths, it looks like mainly for the moving people sprites.

    The reason why you see the code in Firebug but not in “view source” is that it is generated and appended dynamically with JavaScript after the page has loaded, it is not hard-coded static HTML, but I haven’t found yet at which point it is appended.
    The best would be to save the page as plain HTML. If you save it as complete website it saves it with the generated HTML (i. e. the stuff that’s generated and appended by JS) which is definitely confusing to work with. So, save page as plain HTML, save all relevant scripts and stylesheets manually (you can do “view source”, click on the script links, and then “Ctrl/Cmd+S”), and get the images by doing “Ctrl/Cmd+I” (page info), clicking the Media tab, and there you have all images that are used. There is a “save as” button, you can select multiple files and save them all.

    Just keep in mind that you need to reflect the file structure of the original site.

  • #3
    Regular Coder
    Join Date
    Feb 2006
    Posts
    110
    Thanks
    23
    Thanked 0 Times in 0 Posts
    I actually uncompress the js codes but that seems to make no difference except made the code more readable.

    I did as you've mentioned:

    1. "Save As" and it saved the generated HTML as you've said so. It's just too confusing to work like this.

    2. I tried manually saving the plain HTML and making the structure the same as the website by manually downloading the css/js/ and all the image files.

    The problem is that, the script/code still calls the images from the parent website like this after manually downloading everything:
    Code:
    http://visitbruges.be/images/buildings/hotel3.png
    I've tried looking for any reference of visitbruges.be in the js/css files and replace it with localhost but it still calls from the parent website. Could you kindly help find where it's appended?

    Thank you so much for the help so far.

  • #4
    Regular Coder
    Join Date
    Feb 2006
    Posts
    110
    Thanks
    23
    Thanked 0 Times in 0 Posts
    nobody to help?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •