Moving pictures

Question

davy_yg 2 Posting Whiz

8 Years Ago

Hello all,

Please check this: One

I wonder why I cannot make that laptop pictures moves just like any other images (if it moves differently - it must be slightly different):

about.php

<!DOCTYPE html>
<html>
<head>
<title>About</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Animate.css</title>

  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/animate2.css">

   <link rel="stylesheet" media="all" href="css/main.css" />
   <script src="js/modernizr.custom.37797.js"></script> 
   <!-- Grab Google CDN's jQuery. fall back to local if necessary --> 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
   <script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script>
   <script src="js/parallax.js"></script>

</head>



<body>

<?php include('nav.php'); ?>

<br><br><br><br>
<img src="Images/About/person.jpg">

<div id="about">

<div id="bounce">
<p><b>ABOUT</b></p>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>
</div>

</div>


<br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="wrapper">

            <header id="branding">
                <h1>The history of aeronautics</h1>
            </header>

            <nav id="primary">
                <ul>             
                </ul>
            </nav>

            <div id="content">
                <article id="manned-flight">
                </article>

                <article id="frameless-parachute">               
                </article>

                <article id="english-channel">                   
                </article>

                <article id="about">                 
                </article>
            </div>

            <!-- Parallax foreground -->
            <div id="parallax-bg3">
                <img id="bg2-1" src="circle/circle1.png" alt="cloud"/>
                <img id="bg2-2" src="circle/circle2.png" alt="cloud"/>
                <img id="bg2-3" src="circle/circle3.png" alt="cloud"/>
                <img id="bg2-4" src="circle/circle4.png" alt="cloud"/>
                <img id="bg2-5" src="circle/Borderwhite.jpg" alt="cloud"/>
                <img id="bg2-6" src="circle/Borderwhite.jpg" alt="cloud"/>               
            </div>



            <!-- Parallax  background clouds -->
            <div id="parallax-bg1">
                <img id="bg1-1" src="circle/laptop.png" alt="cloud"/>                
            </div>

</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img src="Images/About/benchmarks.jpg">
<br><br><br><br>

<br>

<table style="width:100%">

  <tr>
    <td>



<div id="paragraph1">
<div id="bounce">
<p><b>WHO WE ARE</b></p>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>
</div>
</div>

    </td>

    <td>

<br>
<div id="bounce">
<div id="paragraph2">
<p><b>WHAT WE DO</b></p>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>
</div>
</div>
</tr>  
</table>
    </td>

<center>

<div style="margin-top: 300px;"></div>
<div id="testimonial"><br>
<div id="bounceInRight">
<center><b>TESTIMONIAL</b><br><br>
Lorem ipsum dolor sit amet, euismod consectetuer adipiscing<br> elit, sed diam nonummy nibh euismod tincidunt<br> ut laoreet dolore magna aliquam erat volutpat.<br><br>
</center>

<img src="Images/About/left.jpg">
<img src="Images/About/testperson.jpg">
<img src="Images/About/right.jpg">
<center>Lorem ipsum dolor sit</center>
</div>
</div>
</center>

<?php include('footer.php'); ?>



</body>
</html>

main.css

/* PARALLAX SCROLLING EXPERIMENT
   Master Styles
   Author: Jonathan Nicol (f6design.com)
*****************************************************************/


/* Global reset
   http://meyerweb.com/eric/tools/css/reset/ 
*****************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
/*body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Extended base styles (site specific)
*****************************************************************/

html { 
    overflow-y: scroll; /* always force a scrollbar in non-IE */
    }
/*body {
    background: #e3e5e5;
    overflow-x: hidden;
    height: 4550px;
    line-height: 1.5;
    color: #000;
    font-size: 14px;
    font-family: Arial,sans-serif;
}*/
h1 {
    color: #21a97e;
}
/*a, a:link,
a:active,
a:visited {
    -webkit-transition: color 0.25s ease-out;
    -moz-transition: color 0.25s ease-out;
    -o-transition: color 0.25s ease-out;
    transition: color 0.25s ease-out;
    color:#21a97e;
    outline: none;
    text-decoration:none;
    }
    a:hover { 
        color:#000;
        } */ /*
img { 
    display:block;
    }
p {
    margin:1em 0;
    }

/* Common shared styles
*****************************************************************/
/*
hr {
    margin: 0;
    border: none;
    border-top: 1px solid #3b3b3b;
    border-bottom: 1px solid #3b3b3b;
    height: 3px;
}

/* Page structure
*****************************************************************/
/*
#wrapper {
    position: relative;
}
#branding {
    width: 100%;
    background: #fff;
    }
    #branding h1 {
        width: 940px;
        padding: 10px 15px;
        margin: 0 auto;
        text-transform: uppercase;
        font-size: 18px;
        font-weight: bold;
        }

/* Nav
*****************************************************************/
/*
nav#primary {
    z-index: 5;
    position: fixed;
    top: 50%;
    right: 16px;
    margin-top: -40px;
}
nav#primary li {
    position: relative;
    height: 20px;
}
nav#primary a {
    display: block;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background: transparent url('../img/nav-dot.png') 4px 4px no-repeat;
}
nav#primary a:hover, nav#primary a.active {
    background: transparent url('../img/nav-dot.png') 4px -16px no-repeat;
}
nav#primary h1 {
    position: absolute;
    right: 22px;
    top: -7px;
    display: none;
    padding: 4px 20px 4px 7px;;
    color: #fff;
    white-space: nowrap;
    background: transparent url('../img/nav-arrow.png') 100% 50% no-repeat;
    }
nav.next-prev {
    margin: 20px 0 0 0;
    }
    a.prev,
    a.next {
        display: block;
        width: 15px;
        height: 11px;
        text-indent: -9999px;
        }
    a.prev {
        margin: 0 auto 5px auto;
        background: transparent url('../img/scroll-arrow-up.png') 0 0 no-repeat;
        }
        a.prev:hover {
            background: transparent url('../img/scroll-arrow-up.png') 0 -11px no-repeat;
            }
    a.next {
        margin: 5px auto 0 auto;
        background: transparent url('../img/scroll-arrow-down.png') -1px 0 no-repeat;
        }
        a.next:hover {
            background: transparent url('../img/scroll-arrow-down.png') -1px -11px no-repeat;
            }

/* Parallax
*****************************************************************/

/* content */ /*
#content {
    z-index: 4;
    position: relative;
    max-width: 940px;
    padding: 0 10px;
    margin: 0 auto;
    line-height: 1.7;
    }
    #content article {
        width: 300px;
        }
        #manned-flight ,
        #frameless-parachute,
        #english-channel,
        #about {
            padding-top: 105px;
            }
        #manned-flight {
            position: absolute;
            top: 0px;
            }
        #frameless-parachute {
            position: absolute;
            top: 1090px;
            }
        #english-channel {
            position: absolute;
            top: 2180px;
            }
            #content h1 {
                margin: 0 0 25px 0;
                font-size: 60px;
                font-family: Georgia, serif;
                font-weight: normal;
                line-height: 65px;
                }
        #about {
            position: absolute;
            top: 3270px;
            }
/* foreground (ballons/landscape) */
#parallax-bg3 {
    z-index: 3;
    position: fixed;
    left: 50%; /* align left edge with center of viewport */
    top: 0;
    width: 940px;
    margin-left: -170px; /* move left by half element's width */
    }
    /* balloon */
    #bg3-1 {
        position: absolute;
        top: 311px;
        left: 355px;
        }
    #bg3-2 {
        position: absolute;
        top: 1212px;
        left: 321px;
        }
    #bg3-3 {
        position: absolute;
        top: 2028px;
        left: 403px;
        }
    #bg3-4 {
        position: absolute;
        top: 3000px;
        left: -85px;
        }
/* midground (clouds) */
#parallax-bg2 {
    z-index: 2;
    position: fixed;
    left: 50%; /* align left edge with center of viewport */
    top: 0;
    width: 1200px;
    margin-left: -600px; /* move left by half element's width */
    }
    #bg2-1 {
        position: absolute;
        top: 310px;
        left: 150px;
        }
    #bg2-2 {
        position: absolute;
        top: 310px;
        left: 350px;
        }
    #bg2-3 {
        position: absolute;
        top: 310px;
        left: -80px;
        }
    #bg2-4 {
        position: absolute;
        top: 310px;
        left: -300px;
        }
    #bg2-5 {
        position: absolute;
        top: 550px;
        left: -330px;
        }
    #bg2-6 {
        position: absolute;
        top: 150px;
        left: -330px;
        }   
/* background (clouds) */
#parallax-bg1 {
    z-index: 1;
    position: fixed;
    left: 50%; /* align left edge with center of viewport */
    top: 10px;
    width: 1200px;
    margin-left: -600px; /* move left by half element's width */
    }
    #bg1-1 {
        position: absolute;
        top: 200px;
        left: 100px;
        }
    #bg1-2 {
        position: absolute;
        top: 420px;
        left: 795px;
        }
    #bg1-3 {
        position: absolute;
        top: 520px;
        left: -220px;
        }
    #bg1-4 {
        position: absolute;
        top: 520px;
        left: 450px;
        }

web-design

3 Contributors
4 Replies
181 Views
1 Day Discussion Span
Latest Post 8 Years Ago Latest Post by tobyITguy

All 4 Replies

tobyITguy 24 Junior Poster

8 Years Ago

The only laptop i see in the slider moves like the others.

It fades

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

lps 71 Posting Pro in Training · Answer 1 · 2015-06-04T09:10:26+00:00

Please don't dump the whole codings here. PLEASE do narrow down to part where you suspect the code that messing the things and post it here.

davy_yg 2 Posting Whiz · Answer 2 · 2015-06-05T07:05:39+00:00

I would like to pin down the laptop right under the text.

It must looks good under the articles. This time, it covers up the articles until no one can read it.

I wonder how to do that?

(I gives the whole code so that it easier to modify)

tobyITguy 24 Junior Poster · Answer 3 · 2015-06-05T09:13:26+00:00

I now understand what you talking about.

First you failed to mention that its on the about page.

Next its happening becuase your using parallax on it.

Either take your parallax off or put it in section tags

Moving pictures

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers