Loading Javascript Effekt innerhalb DIV-Element

So fand ich diesen Effekt und ich versuche, es zu ändern, in einem DIV myeffect zum Beispiel geladen werden:Loading Javascript Effekt innerhalb DIV-Element

<html> 
    <head></head> 
    <body> 
     <div class="myeffect"></div> 
    </body> 
</html>

Ich habe versucht, einige Variablen ändern, aber ich bin nicht ein JavaScript-Experte und ich kann es nicht in einem DIC arbeiten. Der Effekt deckt den gesamten Bildschirm von oben nach unten ab.

Der Code ist auf Codepen und ist hier zu finden: https://codepen.io/emilykarp/pen/bVqxRm

Hilfe ist willkommen.

Quelle

2017-07-25 code_learn

this helps

var speeds = []; 
 
var count = 1; 
 
var colors = ['#bf1e2e', '#ee4037', '#dc5323', '#e1861b', '#e1921e', '#f7ac40', '#f7e930', '#d1da22', '#8bc43f', '#38b349', '#008d42', '#006738', '#29b473', '#00a69c', '#26a9e1', '#1a75bb', '#2a388f', '#262161', '#652d90', '#8e2792', '#9e1f64', '#d91c5c', '#ed297b', '#d91c5c', '#db1e5e', '#bf1e2e', '#f6931e', '#f05a28', '#f6931e', '#fbaf41'] 
 
var width = parseInt($('html').css('width'), 10); 
 

 
var random = function(mult, add) { 
 
    return Math.floor((Math.random()*mult) + add); 
 
}; 
 

 
var drop = function(n, height, color) { 
 
    $('.myeffect').append('<div class="drop" style="left:'+ 
 
        n*15+'px;height:'+ 
 
        height+'vh;background-color:'+ 
 
        color+';"></div>'); 
 
}; 
 

 
var createDrops = function(space) { 
 
    for (var i=speeds.length; i < space/10; i++) { 
 
    speeds.push(random(3000, 2000)); 
 
    drop(i, random(70, 30), colors[count]); 
 
    
 
    if (count < colors.length-1) { count++; } 
 
    else { count = 0; } \t \t 
 
    } 
 
}; 
 

 
var animateDrops = function(startingN) { 
 
    for (var i=startingN; i<speeds.length; i++) { 
 
    $('.drop:nth-child('+i+')').slideDown(speeds[i]); 
 
    } 
 
}; 
 

 
createDrops(width); 
 
animateDrops(0);

.drop { 
 
    width: 16px; 
 
    height: 200px; 
 
    display: none; 
 
    border-bottom-left-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
    position: absolute; 
 
    top: 0; 
 
    -webkit-box-shadow: inset -4px -8px 16px -6px rgba(0,0,0,0.47); 
 
    -moz-box-shadow: inset -4px -8px 16px -6px rgba(0,0,0,0.47); 
 
    box-shadow: inset -4px -8px 16px -6px rgba(0,0,0,0.47); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myeffect" ></div>

Quelle

2017-07-25 14:40:38 codegeek

Versuchen Sie, '.myEffect' eine Breite und Höhe. Sie werden sehen, dass die Tropfen immer noch das gesamte Fenster ausfüllen. Ich bin mir ziemlich sicher, OP möchte, dass die Drips nur innerhalb des Divs gerendert werden. – Turnip

Genau @Turnip, ist die Idee, den Effekt in einem div unterhalb der Website Header und Navigationsmenü mit einer Höhe von 60% der Bildschirmhöhe geladen haben. Die Kopie der Webseite sollte unterhalb des Effekts fortgesetzt werden. Das oben genannte funktioniert nicht wirklich. Es zeigt einen x-Überlauf aus irgendeinem Grund und es ist immer noch außerhalb eines DIV. Ich arbeite immer noch daran und werde es hoffentlich mit deiner Hilfe herausfinden. –

Die divs es verwendet werden alle dynamisch generiert und an den Körper mit dieser Methode angehängt.

var drop = function(n, height, color) { 
    $('body').append('<div class="drop" style="left:'+ 
        n*15+'px;height:'+ 
        height+'vh;background-color:'+ 
        color+';"></div>') 
    )};

Also, Sie würden nur das Skript aktualisieren, um an Ihr Element anstelle des body-Elements anzuhängen.

var drop = function(n, height, color) { 
    $('.myeffect').append('<div class="drop" style="left:'+ 
        n*15+'px;height:'+ 
        height+'vh;background-color:'+ 
        color+';"></div>') 
    )};

Quelle

2017-07-25 14:43:50 Korgrue

Von was ich sehen konnte, fehlten 3 Dinge in Ihrem Codepen.

Sie bewarben die Änderung zu 'html' nicht '.myeffect'

In Ihrem js:

`var width = parseInt($('.myeffect').css('width'), 10);`

Sie müssen festlegen eine Breite auf Ihre '.myeffect'

in Ihrem CSS:

.myeffect { width: 100px; }

gibt es keine Markup im Abschnitt codepen 'HTML', außerhalb der HTML-Tags, die wahrscheinlich standardmäßig codepen zur Verfügung stellt.

in Ihrem HTML:

<html> 

    <head></head> 

    <body> 
    <div class="myeffect"></div> 
    </body> 

    </html>

Mein codepen: https://codepen.io/anon/pen/oegwZa

Quelle

2017-07-25 14:54:06 user3738936

Das funktioniert jetzt für mich.

var speeds = []; 
var count = 1; 
var colors = ['#bf1e2e', '#ee4037', '#dc5323', '#e1861b', '#e1921e', 
'#f7ac40', '#f7e930', '#d1da22', '#8bc43f', '#38b349', '#008d42', '#006738', 
'#29b473', '#00a69c', '#26a9e1', '#1a75bb', '#2a388f', '#262161', '#652d90', 
'#8e2792', '#9e1f64', '#d91c5c', '#ed297b', '#d91c5c', '#db1e5e', '#bf1e2e', 
'#f6931e', '#f05a28', '#f6931e', '#fbaf41'] 
var width = parseInt($('.myeffect').css('width'), 10); 

var random = function(mult, add) { 
return Math.floor((Math.random()*mult) + add); 
}; 

var drop = function(n, height, color) { 
$('.myeffect').append('<div class="drop" style="left:'+ 
       n*60+'px;height:'+ 
       height+'vh;background-color:'+ 
       color+';"></div>'); 
}; 
var createDrops = function(space) { 
for (var i=speeds.length; i < space/60 + 2; i++) { 
speeds.push(random(3000, 2000)); 
drop(i, random(35, 20), colors[count]); 

if (count < colors.length-1) { count++; } 
else { count = 0; }  
} 
}; 

var animateDrops = function(startingN) { 
for (var i=startingN; i<speeds.length; i++) { 
    $('.drop:nth-child('+i+')').slideDown(speeds[i]); 
} 
}; 

createDrops(width); 
animateDrops(0);

Quelle

2017-07-25 18:41:47

Loading Javascript Effekt innerhalb DIV-Element

Antwort

Verwandte Themen