phpbb2.phpdevil.com
Bine ai venit pe phpdevil.com.
. Login Register
phpbb2.phpdevil.com

Pentru iubitorii de webdesign


Vezi subiectul anterior Vezi subiectul urmator In jos  Mesaj [Pagina 1 din 1]

Post: #1la data de Dum Noi 01, 2015 3:53 am

avatar

R1bb0N

Moderator
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

Vezi profilul utilizatorului

Post: #2la data de Dum Noi 01, 2015 11:03 am

avatar

Lcnn

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

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

Post: #3la data de Dum Noi 01, 2015 11:46 am

avatar

R1bb0N

Moderator
Am repus codul. Smile

Vezi profilul utilizatorului

Post: #4la data de Lun Noi 02, 2015 1:40 am

avatar

Lcnn

Administrator
Nici demo nu functioneaza!

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

Post: #5la data de Lun Noi 02, 2015 4:16 am

avatar

R1bb0N

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

Vezi profilul utilizatorului

Post: #6la data de Lun Noi 02, 2015 8:18 am

avatar

Lcnn

Administrator
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

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

Post: #7la data de Lun Noi 02, 2015 9:50 am

avatar

Alex C.

Membru pHpDeviL
Asa apare si la mine Smile

Vezi profilul utilizatorului

Post: #8la data de Lun Noi 02, 2015 10:34 am

avatar

R1bb0N

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

Vezi profilul utilizatorului

Post: #9la data de Lun Noi 02, 2015 10:38 am

avatar

Lcnn

Administrator
....Chiar nu stiu ce sa spun..

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

Post: #10

Continut sponsorizat

Vezi subiectul anterior Vezi subiectul urmator Sus  Mesaj [Pagina 1 din 1]

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum