asculta virgin radio

Distribuiţi | 

Index Parallax

 Scris de R1bb0N la data de Dum Noi 01, 2015 3:53 am

Previzualizare: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Descriere:Un index cu niste efecte care sigur va vor placea
Autor:TutorialZine
Cod:
Cod:


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <title>Nume site</title>

    <link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link href="http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/demo.css" rel="stylesheet">
    <link href="http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/header.css" rel="stylesheet">


</head>
<body>



<div
        class="parallax-image-wrapper"
        data-anchor-target="#page-intro"
        data-bottom-top="transform:translateY(200%)"
        data-top-bottom="transform:translateY(0)">

    <div
            class="parallax-image"
            style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/coast.jpg)"
            data-anchor-target="#page-intro"
            data-bottom-top="transform: translateY(-80%);"
            data-top-bottom="transform: translateY(80%);"
            >

    </div>
</div><div
        class="parallax-image-wrapper"
        data-anchor-target=".body-text + .gap"
        data-bottom-top="transform:translateY(200%)"
        data-top-bottom="transform:translateY(0)">

    <div
            class="parallax-image"
            style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/palmtrees.jpg)"
            data-anchor-target=".body-text + .gap"
            data-bottom-top="transform: translateY(-80%);"
            data-top-bottom="transform: translateY(80%);"
            >

    </div>
</div><div
        class="parallax-image-wrapper"
        data-anchor-target=".features-list + .gap"
        data-bottom-top="transform:translateY(200%)"
        data-top-bottom="transform:translateY(0)">

    <div
            class="parallax-image"
            style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/bay.jpg)"
            data-anchor-target=".features-list + .gap"
            data-bottom-top="transform: translateY(-80%);"
            data-top-bottom="transform: translateY(80%);"
            >

    </div>
</div><div
        class="parallax-image-wrapper"
        data-anchor-target=".about-us + .gap"
        data-bottom-top="transform:translateY(200%)"
        data-top-bottom="transform:translateY(0)">

    <div
            class="parallax-image"
            style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/sea.jpg)"
            data-anchor-target=".about-us + .gap"
            data-bottom-top="transform: translateY(-80%);"
            data-top-bottom="transform: translateY(80%);"
            >

    </div>
</div>
<div id="skrollr-body">

    <div id="page-intro" class="gap" style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/coast.jpg); ">
        <h1>Nume forum</h1>
        <a href="/forum" class="btn">Forum</a>
    </div>

    <div class="body-text content">

        <h2>Lorem ipsum</h2>

        <p data-300-center-top="transform: scale(0.8); opacity: 0" data-300-center-center="transform: scale(1); opacity: 1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida in odio vel tincidunt. Fusce quis lectus accumsan, accumsan nibh sed, aliquet purus. In vitae velit eu est cursus malesuada sed ut nibh. Curabitur a leo enim.
        </p>


        <p data-200-center-top="transform: scale(0.8); opacity: 0" data-200-center-center="transform: scale(1); opacity: 1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida in odio vel tincidunt. Fusce quis lectus accumsan, accumsan nibh sed, aliquet purus. In vitae velit eu est cursus malesuada sed ut nibh. Curabitur a leo enim.
        </p>

        <p data-100-center-top="transform: scale(0.8); opacity: 0" data-100-center-center="transform: scale(1); opacity: 1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida in odio vel tincidunt. Fusce quis lectus accumsan, accumsan nibh sed, aliquet purus. In vitae velit eu est cursus malesuada sed ut nibh. Curabitur a leo enim.
        </p>

    </div>

    <div class="gap" style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/palmtrees.jpg); "></div>

    <div class="features-list">

        <h2>Lorem Impsum</h2>

        <div data-100-bottom-top="transform: translateX(-200px); opacity: 0" data-center-top="transform: translateX(0px); opacity: 1">
            <i class="material-icons">cloud_done</i>
            <h4>text <b>text</b></h4>
        </div>

        <div data-100-bottom-top="transform: translateY(200px); opacity: 0" data-center-top="transform: translateY(0px); opacity: 1">
            <i class="material-icons">public</i>
            <h4>text<b> text</b></h4>
        </div>

        <div data-100-bottom-top="transform: translateX(200px); opacity: 0" data-center-top="transform: translateX(0px); opacity: 1">
            <i class="material-icons">security</i>
            <h4>text <b>text</b></h4>
        </div>

    </div>

    <div class="gap" style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/bay.jpg); "></div>


    <div class="about-us">

        <h2>Despre noi :)</h2>

        <div data-150-bottom-center="transform: rotate(-90deg); opacity: 0" data-150-center-center="transform: rotate(0); opacity: 1">
            <img src="http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/avatars/1.jpg" alt="avatar">
        </div>

        <div data-100-bottom-center="transform: rotate(-90deg); opacity: 0" data-100-center-center="transform: rotate(0); opacity: 1">
            <img src="http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/avatars/2.jpg" alt="avatar">
        </div>

        <div data-50-bottom-center="transform: rotate(-90deg); opacity: 0" data-50-center-center="transform: rotate(0); opacity: 1">
            <img src="http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/avatars/3.jpg" alt="avatar">
        </div>

        <div data-150-bottom-center="transform: rotateY(-90deg); opacity: 0" data-150-center-center="transform: rotate(0); opacity: 1">
            <img src="http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/avatars/4.jpg" alt="avatar">
        </div>

        <div data-100-bottom-center="transform: rotateY(-90deg); opacity: 0" data-100-center-center="transform: rotate(0); opacity: 1">
            <img src="http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/avatars/5.jpg" alt="avatar">
        </div>

        <div data-50-bottom-center="transform: rotateY(-90deg); opacity: 0" data-50-center-center="transform: rotate(0); opacity: 1">
            <img src="http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/avatars/6.jpg" alt="avatar">
        </div>

        <a class="attribution" href="http://www.freepik.com/free-photos-vectors/icon">Icon-uri by Freepik</a>

    </div>

    <div class="gap" style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/sea.jpg);"></div>

    <div class="gallery"></div>


    <footer>

        <div class="footer-left">

            <h3>Companylogo</h3>

            <p class="footer-links">
                <a href="#">Acasa</a>
                ·
                <a href="#">Forum</a>
                ·
                <a href="#">Membri+</a>
                ·
                <a href="#">Despre</a>
                ·
                <a href="#">Faq</a>
                ·
                <a href="#">Contact</a>
            </p>

            <p class="footer-company-name">Nume © 2015</p>

        </div>

        <div class="footer-right"  data-bottom-top="max-width: 200px;" data-bottom-bottom="max-width: 600px;">

            <form method="get" action="#">
                <input placeholder="Cauta"  />
                <i class="material-icons">search</i>
            </form>

        </div>

    </footer>


</div>



<div class="scroll-pause" data-anchor-target=".gallery" data-100p-top-top="transform:translateY(100%);" data-top-top="transform:translateY(0%)" data--150p-top-top="" data--300p-top-top="transform:translateY(-100%)">

    <div class="row" data-anchor-target=".gallery" data-top-top="transform: translateX(0%);" data--150p-top-top="transform: translateX(-50%);">
        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/coast.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/palmtrees.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/bay.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/sea.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/coast.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/palmtrees.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/bay.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/sea.jpg);" ></div>
    </div>


    <div class="row" data-anchor-target=".gallery" data-top-top="transform: translateX(-50%);" data--150p-top-top="transform: translateX(0);">

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/sea.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/bay.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/palmtrees.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/coast.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/sea.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/bay.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/palmtrees.jpg);" ></div>

        <div style="background-image:url(http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/images/small/coast.jpg);" ></div>

    </div>

</div>



<script src="http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/assets/skrollr.min.js"></script>

<script>
    skrollr.init();
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>


Ultima editare efectuata de catre Andrei34 in Dum Noi 01, 2015 11:45 am, editata de 1 ori
Offline
avatar
R1bb0N
Moderator

Mesaje : 71
Varsta : 16
Localizare : Romania

Vezi profilul utilizatorului

Re: Index Parallax

 Scris de Lcnn la data de Dum Noi 01, 2015 11:03 am

Index-ul nu este complet,si css-ul nu apare,te rog sa rezolvi aceasta problema.
Offline
avatar
Lcnn
Administrator

Mesaje : 321
Varsta : 25
Localizare : Timisoara

Vezi profilul utilizatorului http://phpbb2.phpdevil.com

Re: Index Parallax

 Scris de R1bb0N la data de Dum Noi 01, 2015 11:46 am

Am repus codul. Smile
Offline
avatar
R1bb0N
Moderator

Mesaje : 71
Varsta : 16
Localizare : Romania

Vezi profilul utilizatorului

Re: Index Parallax

 Scris de Lcnn la data de Lun Noi 02, 2015 1:40 am

Nici demo nu functioneaza!
Offline
avatar
Lcnn
Administrator

Mesaje : 321
Varsta : 25
Localizare : Timisoara

Vezi profilul utilizatorului http://phpbb2.phpdevil.com

Re: Index Parallax

 Scris de R1bb0N la data de Lun Noi 02, 2015 4:16 am

Functioneaza si demo-ul si codul. Posteaza un screen sa vad despre ce este vorba.
Offline
avatar
R1bb0N
Moderator

Mesaje : 71
Varsta : 16
Localizare : Romania

Vezi profilul utilizatorului

Re: Index Parallax

 Scris de Lcnn la data de Lun Noi 02, 2015 8:18 am

[Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Offline
avatar
Lcnn
Administrator

Mesaje : 321
Varsta : 25
Localizare : Timisoara

Vezi profilul utilizatorului http://phpbb2.phpdevil.com

Re: Index Parallax

 Scris de Alex C. la data de Lun Noi 02, 2015 9:50 am

Asa apare si la mine Smile
Offline
avatar
Alex C.
Membru pHpDeviL

Mesaje : 21

Vezi profilul utilizatorului

Re: Index Parallax

 Scris de R1bb0N la data de Lun Noi 02, 2015 10:34 am

ciudat, mie imi apare OK
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
Offline
avatar
R1bb0N
Moderator

Mesaje : 71
Varsta : 16
Localizare : Romania

Vezi profilul utilizatorului

Re: Index Parallax

 Scris de Lcnn la data de Lun Noi 02, 2015 10:38 am

....Chiar nu stiu ce sa spun..
Offline
avatar
Lcnn
Administrator

Mesaje : 321
Varsta : 25
Localizare : Timisoara

Vezi profilul utilizatorului http://phpbb2.phpdevil.com

Re: Index Parallax

 Scris de Continut sponsorizat

Offline

Continut sponsorizat


Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
phpbb2.phpdevil.com :: PHPDEVIL # Web-design :: Index-uri si template-uri-
Mergi direct la:  

pHpDeviL | For the love of the game...