[Javascript] Consiglio

goonie · 30 Gen 2017

Ragazzi ho un problema, sto creando un sito web, e vorrei implementare una funzione di scroll abbastanza semplice, solo che le prime due sezioni della home devono funzionare nel seguente modo:
dalla prima sezione della homepage,composta da un background e un logo centrale, scrollando in verso il basso il logo scompare e un testo con effetto fadein compare al centro, e se si scrolla verso l alto succede il contrario, in tutto questo il background non deve muoversi.

Grazie dell aiuto!

borgo italia · 30 Gen 2017

ciao
più che un prblema di js mi sembra un problema di css, se il logo (div che lo contiene) non deve scrollare dagli l'opzione fixed

goonie · 30 Gen 2017

ma come faccio ad assegnare quessta "fluttuazione" da logo che scompare a testo che compare, al comando di scroll?
devo farlo con un js credo

borgo italia · 31 Gen 2017

ciao
se non ho capito male e provi questo, vedrai che la parte grigia rimane fissa in alto, le altre 'porcherie' che ho messo scorono

HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
#fisso{
    position:fixed;
    background-color:#CCC;
    width:100%;
    top:0px;
    /*e eventuali altri parametri*/
}
</style>
</head>
<body>
<div id="fisso">
<p>questa parte rimane</p>
<p>ferma in alto, mentre il resto scorre</p>
</div>
<p>eeee </p>
<p>rrrrr</p>
<p>ttttt</p>
<p>tttttt</p>
<p>tttttt</p>
<p>uuuuuu</p>
<p>uuuu</p>
<p>wwwwww</p>
<p>rrrrrr</p>
<p>pppppp</p>
<p>ssssss</p>
<p>ttttt</p>
<p>d</p>
<p>f</p>
<p>g</p>
<p>h</p>
<p>j</p>
<p>k</p>
<p>l</p>
<p>p</p>
<p>u</p>
<p>y</p>
<p>t</p>
<p>r</p>
<p>e</p>
<p>w</p>
<p>q</p>
<p>a</p>
<p>dd</p>
</body>
</html>

evidente che devi dare al div altri aggiustamenti che ti servono

goonie · 31 Gen 2017

no non e cosi, comunque ho capito che e un effetto di scrollmagic, che sto cercando di capire, perche l unico tutorial avanzato e a pagamento

borgo italia · 31 Gen 2017

ciao
sei sicuro?
https://scotch.io/tutorials/building-interactive-scrolling-websites-with-scrollmagic-js

criric · 31 Gen 2017

Ciao, prova questo

HTML:

<html>
    <head>
        <script>
            window.onscroll = function (e) {
                if (e.pageY > 90) {
                    document.getElementById("imglogo").style.display = "none";
                    document.getElementById("logotxt").style.display = "inline";
                } else {
                    document.getElementById("imglogo").style.display = "inline";
                    document.getElementById("logotxt").style.display = "none";
                }
            }
        </script>
        <style>
            body {
                margin:0;
                padding:0;
                height: 3000px;
            }
            #header {
                background-color: #F3F3F3;
                position: fixed;
                width:100%;
            }
            #logo {
                text-align: center;
            }
            #logo img{
                height:90px;
            }
            #logotxt {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <div id="logo">
                <h1 id="logotxt">Mr.Webmaster</h1>
                <img id="imglogo" src="http://forum.mrwebmaster.it/styles/brivium/stylium/vanadium/xenforo/logo_mrw_forum.png" alt="logo"/>
            </div>
        </div>
    </body>
</html>

Cerca

Cerca

[Javascript] Consiglio

goonie

Nuovo Utente

borgo italia

Super Moderatore

goonie

Nuovo Utente

borgo italia

Super Moderatore

goonie

Nuovo Utente

borgo italia

Super Moderatore

criric

Super Moderatore

Discussioni simili