Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I got these scripts but they're not loading properly. Can't say for sure what the issue is but the CSS and JS don't look like they're being picked up. Cause the index.html isn't being rendered as it should.
I'm not sure what I'm doing wrong or what I'm missing. It's probably something annoyingly small.
I feel like I've referenced the css and js with the script and link tags, but it still doesn't get rendered.
I listed the three scripts below. Any ideas please?
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<div class='moon'>
<div class='crater1'></div>
<div class='crater2'></div>
<div class='crater3'></div>
</div>
<canvas id="canvas"></canvas>
<div id="sea"></div>
<div id="beach"></div>
<img src="https://dl.dropbox.com/s/2k0mtrxc2dqurmh/jumping.png" alt="jumping-people" id="people" />
<!--<img src="https://dl.dropbox.com/s/zoftkmdxyyqr8ce/belair.png" alt="jumping-people" id="car" />-->
<div id="merrywrap" class="merrywrap">
<div class="giftbox">
<div class="cover">
<div></div>
</div>
<div class="box"></div>
</div>
<div class="icons">
<div class="row">
<span>H</span>
<span>a</span>
<span>p</span>
<span>p</span>
<span>y</span>
</div>
<div class="row">
<span>B</span>
<span>i</span>
<span>r</span>
<span>r</span>
<span>t</span>
<span>h</span>
<span>d</span>
<span>a</span>
<span>y</span>
</div>
<div class="row">
<span>D</span>
<span>a</span>
<span>v</span>
<span>e</span>
<!-- <span>t</span>
<span>h</span>
<span>e</span>
<span>a</span>
<span>r</span>
<span>t</span> -->
</div>
</div>
</div>
<script src="style.js"></script>
<div id="video">
<!--<iframe width="255" height="155" src="https://www.youtube.com/embed/MrXBATtOtFY?controls=0&loop=1" frameborder="0" allowfullscreen></iframe>-->
</div>
style.css
/* Kaushan+Script, oregano, sail */
#import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
html, body, .container {
height: 100%;
font-family: 'Kaushan Script','Sail', cursive;
}
body {
background: #e74;
overflow: hidden;
background-image: linear-gradient( to bottom, #190e14 ,#0d0d4b 30%, #c76075 80%, #e9b64b 95% );
background-image:
radial-gradient(circle at center bottom, #e9b64b ,#c76075 15%, #0d0d4b 75%, #190e14 90%);
}
div#beach,
canvas#canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div#beach {
background-image: url(https://dl.dropbox.com/s/oe0oce2udq44bj5/beachsil2.png);
/* background-size: cover; */
background-position: bottom right;
background-size: 1700px;
background-repeat: no-repeat;
}
div#video {
position: absolute;
right: 243px;
bottom: 200px;
}
div#video iframe {
width: 255px;
height: 155px;
}
#people {
position: absolute;
bottom: 65px;
left: 40px;
width: 140px;
}
#car {
position: absolute;
bottom: 46px;
left: 180px;
width: 230px;
}
div#sea {
background-color: blue;
height: 85px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-image:
radial-gradient(circle at center top, #23485a, #0d0246);
}
.merrywrap{
position: absolute;
right: 0px;
left: 0px;
bottom: 0px;
top: 0px;
background-color: #d44;
transition: background-color .5s ease;
}
.giftbox{
position: absolute;
width:300px;
height:200px;
left:50%;
margin-left: -150px;
bottom: 40px;
z-index:10;
&>div{
background: #34495e;
position: absolute;
&:after,&:before{
position: absolute;
content:"";
top: 0;
}
}
&:after{
position: absolute;
color:#fff;
width:100%;
content:"Click Me!";
left: 0;
bottom: 0;
font-size: 24px;
text-align: center;
transform:rotate(-20deg);
transform-origin:0 0;
}
.cover{
width:100%;
top: 0;
left: 0;
height:25%;
z-index:2;
&:before{
position: absolute;
height:100%;
left: 50%;
width:50px; transform:translateX(-50%);
background:#fdc56d;
}
&>div{
position: absolute;
width:50px;
height:50px;
left:50%;
top:-50px; transform:translateX(-50%);
&:before,&:after{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content:"";
box-shadow:inset 0 0 0 15px #fdc56d;
border-radius:30px;
transform-origin:50% 100%;
}
&:before{
transform:translateX(-45%) skewY(40deg);
}
&:after{ transform:translateX(45%) skewY(-40deg);
}
}
}
.box{
right:5%;
left:5%;
height:80%;
bottom: 0;
&:before{
width:50px;
height:100%;
left:50%;
transform:translateX(-50%);
background:#fdc56d;
}
&:after{
width:100%;
height:30px;
background:rgba(0,0,0,0.2);
}
}
}
.icons{
position:absolute;
left: 10px;
/*top:50%;
width: 100%;*/
height: auto;
transform:translateY(10px) rotate(-20deg);
.row{
width:100%;
text-align: center;
span{
color: #e5e5e5;
text-shadow: 4px 4px 0 rgba(96, 125, 139, 0.4);
font-size: 50px;
display: inline-block;
opacity:0;
transition: transform 0.5s ease-in, opacity 0.7s;
}
}
}
.step-1{
.giftbox{
animation:wobble 0.5s linear infinite forwards;
}
.cover{
animation:wobble 0.5s linear infinite 0.1s forwards;
}
.icons .row span{
opacity:1;
}
}
.step-2 .giftbox:after{
opacity:0;
}
.step-3 .giftbox,
.step-4 .giftbox{
opacity: 0;
z-index:1;
&:after{
opacity:0;
}
}
.step-2{
.giftbox{
.cover{
animation:flyUp 0.4s ease-in forwards;
}
.box{
animation:flyDown 0.2s ease-in 0.05s forwards;
}
}
}
#keyframes wobble{
25%{
transform:rotate(4deg);
}
75%{
transform:rotate(-2deg);
}
}
#keyframes flyUp{
75%{
opacity:1;
}
100%{
transform:translateY(-1000px) rotate(20deg);
opacity:0;
}
}
#keyframes flyDown{
75%{
opacity:1;
}
100%{
transform:translateY(100%);
opacity:0;
}
}
.step-1 .icons .row span{
opacity:0;
}
.step-1 .icons .row span:first-child {
transform: translateY(700%) translateX(600%);
}
.step-1 .icons .row span:nth-child(2) {
transform: translateY(700%) translateX(500%);
}
.step-1 .icons .row span:nth-child(3) {
transform: translateY(700%) translateX(400%);
}
.step-1 .icons .row span:nth-child(4) {
transform: translateY(700%) translateX(300%);
}
.step-1 .icons .row span:nth-child(5) {
transform: translateY(700%) translateX(200%);
}
.step-1 .icons .row span:nth-child(6) {
transform: translateY(700%) translateX(100%);
}
.step-1 .icons .row span:nth-child(7) {
transform: translateY(700%) translateX(0);
}
.step-1 .icons .row span:nth-child(8) {
transform: translateY(700%) translateX(-100%);
}
.step-1 .icons .row span:nth-child(9) {
transform: translateY(700%) translateX(-200%);
}
.step-1 .icons .row span:nth-child(10) {
transform: translateY(700%) translateX(-300%);
}
.step-1 .icons .row span:nth-child(11) {
transform: translateY(700%) translateX(-400%);
}
.step-1 .icons .row span:nth-child(12) {
transform: translateY(700%) translateX(-500%);
}
.step-1 .icons .row span:nth-child(13) {
transform: translateY(700%) translateX(-600%);
}
.step-2 .icons .row span:nth-child(2) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.step-2 .icons .row span:nth-child(3) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.step-2 .icons .row span:nth-child(4) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.step-2 .icons .row span:nth-child(5) {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.step-2 .icons .row span:nth-child(6) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.step-2 .icons .row span:nth-child(7) {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.step-2 .icons .row span:nth-child(8) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.step-2 .icons .row span:nth-child(9) {
-webkit-transition-delay: 0.45s;
transition-delay: 0.45s;
}
.step-2 .icons .row span:nth-child(10) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.step-2 .icons .row span:nth-child(11) {
-webkit-transition-delay: 0.55s;
transition-delay: 0.55s;
}
.step-2 .icons .row span:nth-child(12) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.step-2 .icons .row span:nth-child(13) {
-webkit-transition-delay: 0.65s;
transition-delay: 0.65s;
}
.step-2 .icons span,.step-3 .icons span,.step-4 .icons span {
opacity: 1;
transition-timing-function: cubic-bezier(0.000, 0.000, 0.200, 0.910);
}
.step-4 .icons .row span,.step-3 .icons .row span {
/*animation: wobble 0.6s linear infinite forwards;*/
color: #c6e2ff;
animation: neon .08s ease-in-out infinite alternate;
}
.step-4 .icons .row span:nth-child(even),.step-3 .icons .row span:nth-child(even) {
animation-duration: 0.7s;
}
#keyframes neon {
from {
text-shadow:
0 0 6px rgba(202,228,225,0.92),
0 0 30px rgba(202,228,225,0.34),
0 0 12px rgba(30,132,242,0.52),
0 0 21px rgba(30,132,242,0.92),
0 0 34px rgba(30,132,242,0.78),
0 0 54px rgba(30,132,242,0.92);
}
to {
text-shadow:
0 0 6px rgba(202,228,225,0.98),
0 0 30px rgba(202,228,225,0.42),
0 0 12px rgba(30,132,242,0.58),
0 0 22px rgba(30,132,242,0.84),
0 0 38px rgba(30,132,242,0.88),
0 0 60px rgba(30,132,242,1);
}
}
.moon {
position: absolute;
top: 10%;
right: 200px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ddd;
box-shadow: inset 20px -10px 0 0 #b9b9b9;
}
.moon .crater1 {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: #bbb;
box-shadow: inset -3px 1.5px 0 0 #aaa;
top: 20px;
right: 20px;
}
.moon .crater2 {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #bbb;
box-shadow: inset -1px 0.5px 0 0 #aaa;
top: 45px;
right: 50px;
}
.moon .crater3 {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background: #bbb;
box-shadow: inset -1.5px 0.75px 0 0 #aaa;
top: 60px;
right: 25px;
}
#media (min-width: 1000px) {
.icons { left: 30px; }
.icons .row span { font-size: 56px; }
#people {
left: 80px;
bottom: 70px;
width: 160px;
}
div#beach {
background-size: 2000px;
}
div#video {
right: 290px;
bottom: 235px;
}
div#video iframe {
width: 295px;
height: 185px;
}
.moon {
right: 230px;
}
}
script.js
window.requestAnimFrame = ( function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ) {
window.setTimeout( callback, 1000 / 60 );
};
})();
var canvas = document.getElementById( 'canvas' ),
ctx = canvas.getContext( '2d' ),
// full screen dimensions
cw = window.innerWidth,
ch = window.innerHeight,
// firework collection
fireworks = [],
// particle collection
particles = [],
hue = 120,
limiterTotal = 5,
limiterTick = 0,
timerTotal = 80,
timerTick = 0,
mousedown = false,
mx,
my;
canvas.width = cw;
canvas.height = ch;
function random( min, max ) {
return Math.random() * ( max - min ) + min;
}
// calculate the distance between two points
function calculateDistance( p1x, p1y, p2x, p2y ) {
var xDistance = p1x - p2x,
yDistance = p1y - p2y;
return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}
// create firework
function Firework( sx, sy, tx, ty ) {
// actual coordinates
this.x = sx;
this.y = sy;
// starting coordinates
this.sx = sx;
this.sy = sy;
// target coordinates
this.tx = tx;
this.ty = ty;
// distance from starting point to target
this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
this.distanceTraveled = 0;
this.coordinates = [];
this.coordinateCount = 3;
// populate initial coordinate collection with the current coordinates
while( this.coordinateCount-- ) {
this.coordinates.push( [ this.x, this.y ] );
}
this.angle = Math.atan2( ty - sy, tx - sx );
this.speed = 2;
this.acceleration = 1.05;
this.brightness = random( 50, 70 );
// circle target indicator radius
this.targetRadius = 1;
}
// update firework
Firework.prototype.update = function( index ) {
// remove last item in coordinates array
this.coordinates.pop();
// add current coordinates to the start of the array
this.coordinates.unshift( [ this.x, this.y ] );
// cycle the circle target indicator radius
if( this.targetRadius < 8 ) {
this.targetRadius += 0.3;
} else {
this.targetRadius = 1;
}
// speed up the firework
this.speed *= this.acceleration;
// get the current velocities based on angle and speed
var vx = Math.cos( this.angle ) * this.speed,
vy = Math.sin( this.angle ) * this.speed;
// how far will the firework have traveled with velocities applied?
this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
// if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
if( this.distanceTraveled >= this.distanceToTarget ) {
createParticles( this.tx, this.ty );
// remove the firework, use the index passed into the update function to determine which to remove
fireworks.splice( index, 1 );
} else {
// target not reached, keep traveling
this.x += vx;
this.y += vy;
}
}
// draw firework
Firework.prototype.draw = function() {
ctx.beginPath();
// move to the last tracked coordinate in the set, then draw a line to the current x and y
ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
ctx.lineTo( this.x, this.y );
ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
ctx.stroke();
ctx.beginPath();
// draw the target for this firework with a pulsing circle
ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
ctx.stroke();
}
// create particle
function Particle( x, y ) {
this.x = x;
this.y = y;
// track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
this.coordinates = [];
this.coordinateCount = 5;
while( this.coordinateCount-- ) {
this.coordinates.push( [ this.x, this.y ] );
}
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 10 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 1;
// set the hue to a random number +-20 of the overall hue variable
this.hue = random( hue - 20, hue + 20 );
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}
// update particle
Particle.prototype.update = function( index ) {
// remove last item in coordinates array
this.coordinates.pop();
// add current coordinates to the start of the array
this.coordinates.unshift( [ this.x, this.y ] );
// slow down the particle
this.speed *= this.friction;
// apply velocity
this.x += Math.cos( this.angle ) * this.speed;
this.y += Math.sin( this.angle ) * this.speed + this.gravity;
// fade out the particle
this.alpha -= this.decay;
// remove the particle once the alpha is low enough, based on the passed in index
if( this.alpha <= this.decay ) {
particles.splice( index, 1 );
}
}
// draw particle
Particle.prototype.draw = function() {
ctx. beginPath();
// move to the last tracked coordinates in the set, then draw a line to the current x and y
ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
ctx.lineTo( this.x, this.y );
ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
ctx.stroke();
}
// create particle group/explosion
function createParticles( x, y ) {
// increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
var particleCount = 30;
while( particleCount-- ) {
particles.push( new Particle( x, y ) );
}
}
// main demo loop
function loop() {
// this function will run endlessly with requestAnimationFrame
requestAnimFrame( loop );
// increase the hue to get different colored fireworks over time
hue += 0.5;
// normally, clearRect() would be used to clear the canvas
// we want to create a trailing effect though
// setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
ctx.globalCompositeOperation = 'destination-out';
// decrease the alpha property to create more prominent trails
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect( 0, 0, cw, ch );
// change the composite operation back to our main mode
// lighter creates bright highlight points as the fireworks and particles overlap each other
ctx.globalCompositeOperation = 'lighter';
// loop over each firework, draw it, update it
var i = fireworks.length;
while( i-- ) {
fireworks[ i ].draw();
fireworks[ i ].update( i );
}
// loop over each particle, draw it, update it
var i = particles.length;
while( i-- ) {
particles[ i ].draw();
particles[ i ].update( i );
}
// launch fireworks automatically to random coordinates, when the mouse isn't down
if( timerTick >= timerTotal ) {
if( !mousedown ) {
// start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
timerTick = 0;
}
} else {
timerTick++;
}
// limit the rate at which fireworks get launched when mouse is down
if( limiterTick >= limiterTotal ) {
if( mousedown ) {
// start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
fireworks.push( new Firework( cw / 2, ch, mx, my ) );
limiterTick = 0;
}
} else {
limiterTick++;
}
}
window.onload=function(){
var merrywrap=document.getElementById("merrywrap");
var box=merrywrap.getElementsByClassName("giftbox")[0];
var step=1;
var stepMinutes=[2000,2000,1000,1000];
function init(){
box.addEventListener("click",openBox,false);
}
function stepClass(step){
merrywrap.className='merrywrap';
merrywrap.className='merrywrap step-'+step;
}
function openBox(){
if(step===1){
box.removeEventListener("click",openBox,false);
}
stepClass(step);
if(step===3){
}
if(step===4){
reveal();
return;
}
setTimeout(openBox,stepMinutes[step-1]);
step++;
}
init();
}
function reveal() {
document.querySelector('.merrywrap').style.backgroundColor = 'transparent';
loop();
var w, h;
if(window.innerWidth >= 1000) {
w = 295; h = 185;
}
else {
w = 255; h = 155;
}
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "https://www.youtube.com/embed/MrXBATtOtFY?controls=0&loop=1&autoplay=1");
//ifrm.style.width = `${w}px`;
//ifrm.style.height = `${h}px`;
ifrm.style.border = 'none';
document.querySelector('#video').appendChild(ifrm);
}
You are referencing
<script src="style.js"></script>
I assume you ment to reference the "script.js" file..
<script src="script.js"></script>
I also suggest to add the async keyword to the tag for better performence:
https://flaviocopes.com/javascript-async-defer/
I have created a 3D cube that the user can rotate it by mouse, each face contains an image, i want to detect which face is in the front of the user "or screen of the device" and i want that if the user rotate the cube, it will automatically oriented " the cube will not be crooked" + automatic appearance of a text near of the cube.
$(function() {
var el = document.createElement('div'),
transformProps = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
transformProp = support(transformProps),
transitionDuration = 'transitionDuration WebkitTransitionDuration MozTransitionDuration OTransitionDuration msTransitionDuration'.split(' '),
transitionDurationProp = support(transitionDuration);
function support(props) {
for (var i = 0, l = props.length; i < l; i++) {
if (typeof el.style[props[i]] !== "undefined") {
return props[i];
}
}
}
var mouse = {
start: {}
},
touch = document.ontouchmove !== undefined,
viewport = {
x: -180,
y: 180,
el: $('.cube')[0],
move: function(coords) {
if (coords) {
if (typeof coords.x === "number") this.x = coords.x;
if (typeof coords.y === "number") this.y = coords.y;
}
this.el.style[transformProp] = "rotateX(" + this.x + "deg) rotateY(" + this.y + "deg)";
},
reset: function() {
this.move({
x: 0,
y: 0
});
}
};
viewport.duration = function() {
var d = touch ? 150 : 200;
viewport.el.style[transitionDurationProp] = d + "ms";
return d;
}();
$(document).keydown(function(evt) {
switch (evt.keyCode) {
case 37: // left
viewport.move({
y: viewport.y - 90
});
break;
case 38: // up
evt.preventDefault();
viewport.move({
x: viewport.x + 90
});
break;
case 39: // right
viewport.move({
y: viewport.y + 90
});
break;
case 40: // down
evt.preventDefault();
viewport.move({
x: viewport.x - 90
});
break;
case 27: //esc
viewport.reset();
break;
default:
break;
};
}).bind('mousedown touchstart', function(evt) {
delete mouse.last;
if ($(evt.target).is('a, iframe')) {
return true;
}
evt.originalEvent.touches ? evt = evt.originalEvent.touches[0] : null;
mouse.start.x = evt.pageX;
mouse.start.y = evt.pageY;
$(document).bind('mousemove touchmove', function(event) {
// Only perform rotation if one touch or mouse (e.g. still scale with pinch and zoom)
if (!touch || !(event.originalEvent && event.originalEvent.touches.length > 1)) {
event.preventDefault();
// Get touch co-ords
event.originalEvent.touches ? event = event.originalEvent.touches[0] : null;
$('.viewport').trigger('move-viewport', {
x: event.pageX,
y: event.pageY
});
}
});
$(document).bind('mouseup touchend', function() {
$(document).unbind('mousemove touchmove');
});
});
$('.viewport').bind('move-viewport', function(evt, movedMouse) {
// Reduce movement on touch screens
var movementScaleFactor = touch ? 6 : 1;
if (!mouse.last) {
mouse.last = mouse.start;
} else {
if (forward(mouse.start.x, mouse.last.x) != forward(mouse.last.x, movedMouse.x)) {
mouse.start.x = mouse.last.x;
}
if (forward(mouse.start.y, mouse.last.y) != forward(mouse.last.y, movedMouse.y)) {
mouse.start.y = mouse.last.y;
}
}
viewport.move({
x: viewport.x + parseInt((mouse.start.y - movedMouse.y) / movementScaleFactor),
y: viewport.y - parseInt((mouse.start.x - movedMouse.x) / movementScaleFactor)
});
mouse.last.x = movedMouse.x;
mouse.last.y = movedMouse.y;
function forward(v1, v2) {
return v1 >= v2 ? true : false;
}
});
});
.viewport {
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 200px;
-webkit-transform: scale(0.75, 0.75);
-moz-perspective: 800px;
-moz-perspective-origin: 50% 200px;
-moz-transform: scale(0.75, 0.75);
perspective: 800px;
perspective-origin: 50% 200px;
transform: scale(0.80, 0.80);
}
.cube {
position: relative;
margin: 0 auto 100px;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 50ms linear;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-10deg) rotateY(20deg);
-moz-transition: -moz-transform 50ms linear;
-moz-transform-style: preserve-3d;
-moz-transform: rotateX(-10deg) rotateY(20deg);
transition: transform 50ms linear;
transform-style: preserve-3d;
transform: rotateX(-10deg) rotateY(20deg);
}
.cube h2 {
color: #fff;
padding-top: 0;
margin-top: 0;
}
.cube a {
color: #fff;
}
.cube>div {
/* box-shadow: 0px 0px 300px #fffdfdc4;*/
position: absolute;
height: 370px;
width: 370px;
padding: 20px;
background-color: #e4f2ff99;
font-size: 1em;
line-height: 1em;
color: #fff;
border: 1px solid #fe7f7f;
border-radius: 20px;
}
.cube>div:hover {
/*box-shadow: 0px 0px 100px #343a4094;*/
box-shadow: 0px 0px 100px #b3d7ff;
background-color: #ffffffd1;
}
.cube>div:first-child {
-webkit-transform: rotateX(90deg) translateZ(200px);
-moz-transform: rotateX(90deg) translateZ(200px);
transform: rotateX(90deg) translateZ(200px);
}
.cube>div:nth-child(2) {
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
transform: translateZ(200px);
}
.cube>div:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
transform: rotateY(90deg) translateZ(200px);
text-align: center;
}
.cube>div:nth-child(4) {
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
transform: rotateY(180deg) translateZ(200px);
}
.cube>div:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
transform: rotateY(-90deg) translateZ(200px);
}
.cube>div:nth-child(5) p {
text-align: center;
font-size: 2.77em;
margin: 40px;
line-height: 60px;
}
.cube>div:nth-child(6) {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
}
object {
opacity: 0.5;
}
object:hover {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="viewport">
<section class="cube">
<div>
<a class="F3" href="javascript:void(0);">
<h4 class="titleS titleS1">1</h4>
</a>
</div>
<div>
<a class="F1" href="javascript:void(0);">
<h4 class="titleS titleS1">2</h4>
</a>
</div>
<div>
<a class="F2" href="javascript:void(0);">
<h4 class="titleS titleS1">3</h4>
</a>
</div>
<div>
<a class="F4" href="javascript:void(0);">
<h4 class="titleS titleS1">4</h4>
</a>
</div>
<div>
<a class="F5" href="javascript:void(0);">
<h4 class="titleS titleS1">5</h4>
</a>
</div>
<div>
<a class="F6" href="javascript:void(0);">
<h4 class="titleS titleS1">6</h4>
</a>
</div>
</section>
</article>
I want to make a custom click animation for my website, I want to do something like this:
Here's a capture from that gif
My first aproach was something like this:
It has some problems, for example when I click the animation is triggered but the animation follows the mouse instead of stay in the clicks coords, it lacks of many things like those shiny particles that spread across the click zone and that blurred halo, I dont know how to do this thing, someone know what should I do to accomplish this? like, what should I study or search to get what I want? I lack of expertise so I would really like some little guidance or anything
I dont know if this helps even a little bit but still I'll paste the code of my first approach
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: " + (e.pageY - 10) + "px; left: " + (e.pageX - 10) + "px;");
})
document.addEventListener('click', () => {
cursor.classList.add("expand");
setTimeout(() => {
cursor.classList.remove("expand");
}, 500);
})
body {
margin: 0;
height: 100vh;
background-color: black;
}
.cursor {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
}
#keyframes cursorAnim3 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.expand {
animation: cursorAnim3 .3s forwards;
border: 2px solid rgba(255, 255, 255, 0.7);
}
<div class="cursor"></div>
Any suggestion is welcome :c
What I added to your code is an if statement inside of your mousemove event. I don't know how to explain, I just added it and it works... Hope that's what you wanted! :) PS: I also added overflow-x: hidden and overflow-y: hidden since the body size was increasing. It is located inside of
body {
}
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
if (cursor.classList.length === 1) {
cursor.setAttribute("style", "top: " + (e.pageY - 10) + "px; left: " + (e.pageX - 10) + "px;");
}
})
document.addEventListener('click', () => {
cursor.classList.add("expand");
setTimeout(() => {
cursor.classList.remove("expand");
}, 500);
})
body {
margin: 0;
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
background-color: black;
}
.cursor {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
}
#keyframes cursorAnim3 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.expand {
animation: cursorAnim3 .3s forwards;
border: 2px solid rgba(255, 255, 255, 0.7);
}
<div class="cursor"></div>
I have an image. I have written some code that will rotate it over en over,
but the setInterval() function is not working.
Please can you tell me why?
var star = document.getElementById('star');
setInterval(function() {star.style.transform = "rotate(10deg)"; },10);
You need to increment the degree value on each function call, simply do it using a variable. In your case it will always stay on 10degree rotate.
DEMO:
var star = document.getElementById('star'),
deg = 10;
setInterval(function() {
star.style.transform = "rotate(" + deg + "deg)";
deg = (deg + 10) % 360
}, 10);
#star {
width: 100px;
height: 100px;
background: red;
}
<div id="star"></div>
You can use css animation here
#keyframes anim {
0% {
transform: rotate(0deg);
}25% {
transform: rotate(90deg);
}50% {
transform: rotate(180deg);
}75% {
transform: rotate(270deg);
}100% {
transform: rotate(360deg);
}
}
#star {
width: 100px;
height: 100px;
background: red;
animation: anim .36s infinite;
}
<div id="star"></div>
Small sample:
var ready = function() {
var
star = document.getElementById('star'),
degree = 0;
setInterval(function() {
/* Every 10ms degree variable increase its value by 1 */
star.style.transform = "rotate(" + ++degree +"deg)"; }, 10
);
};
#star {
margin-left: 100px;
margin-top: 40px;
width: 60px;
border: 1px solid;
padding: 20px;
}
<body onload="ready()">
<div id="star">
<h1>Yay!</h1>
</div>
</body>
I am trying to activate this small CSS animation involving CSS 3d transforms, when each of the elements scroll into view. The laptops need to open and close when scrolled into position. Is there any way this can be done using only CSS? If not Jquery answers will also be helpful!
The code is below.
/* Css Code */
.macbook {
width: 300px;
margin: 50px auto;
-webkit-perspective: 750;
-webkit-perspective-origin: 50% bottom;
-webkit-transform-style: preserve-3d;
-moz-perspective: 750px;
-moz-perspective-origin: 50% bottom;
-moz-transform-style: preserve-3d;
perspective: 750;
perspective-origin: 50% bottom;
transform-style: preserve-3d;
}
.macbook-lid {
width: 80%;
margin: 0 auto;
-webkit-transform-origin: 50% bottom;
-webkit-transform-style: preserve-3d;
-moz-transform-origin: 50% bottom;
-moz-transform-style: preserve-3d;
transform-origin: 50% bottom;
transform-style: preserve-3d;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.macbook-lid:before {
display: block;
content: '';
width: 92%;
margin: 0 auto;
padding: 2% 3% 0 3%;
background-color: #D3D1D2;
border-radius: 10px 10px 0 0;
-webkit-transform-origin: 50% bottom;
-webkit-transform: rotate3d(1, 0, 0, 90deg);
-moz-transform-origin: 50% bottom;
-moz-transform: rotate3d(1, 0, 0, 90deg);
transform-origin: 50% bottom;
transform: rotate3d(1, 0, 0, 90deg);
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.macbook-screen {
position: relative;
background-color: #353535;
margin: 0 auto;
padding: 3%;
border-radius: 5px 5px 0 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.macbook-screen:before {
display: block;
content: '';
position: absolute;
top: 2%;
left: 49%;
width: 1%;
padding-top: 1%;
background-color: #000;
}
.macbook-content {
position: relative;
overflow: hidden;
box-shadow: inset 0px 0px 6px #222;
}
.macbook-content1 {
background-image: url("../img/cs.png");
}
.macbook-content2 {
background-image: url("../img/xyz.png");
}
.macbook-content3 {
background-image: url("../img/abc.png");
}
.macbook-content4 {
background-image: url("../img/def.png");
}
.macbook-content5 {
background-image: url("../img/ghi.png");
}
.macbook-content6 {
background-image: url("../img/jkl.png");
}
.macbook-content:before {
display: block;
content: '';
width: 1px;
padding-top: 60%;
float: left;
}
.macbook-content:after {
display: block;
content: '';
clear: both;
}
.macbook:not(:hover) .macbook-lid {
-webkit-transform: rotate3d(-1, 0, 0, 91deg);
-moz-transform: rotate3d(-1, 0, 0, 91deg);
transform: rotate3d(-1, 0, 0, 91deg);
}
.macbook:not(:hover) .macbook-lid:before {
width: 94%;
}
<div class="row">
<div class="col-md-3">
<div class="macbook">
<div class="macbook-lid">
<div class="macbook-screen">
<div class="macbook-content macbook-content1">
</div>
</div>
</div>
<div class="macbook-base"></div>
</div>
</div>
<div class="col-md-9">
<div class="website-description text-content-yellow">
<h1>EYE- Name</h1>
<p>Description</p>
</div>
</div>
</div>
There is no way to do this via CSS only.
But you can acompilsh this easily via Waypoints library
var waypoint = new Waypoint({
element: document.getElementById('yourElement'),
handler: function(direction) {
console.log('Scrolled to waypoint!');
}
})
or with jQuery
var waypoints = $('.col-md-3').waypoint({
handler: function(direction) {
$('.col-md-3').addClass('inview');
}
})
Edit
But, for the sake of education, here is a solution built from scratch, library agnostic, easy to use.
var getPoints = function($el, wt){
return (wt > ($el.offset().top - ($(window).height()/2)) && wt < (($el.offset().top) + $el.height()));
}
var cm = function checkMilestones() {
var wt = $(window).scrollTop();
if(getPoints($('.col-md-3'), wt)){
//check if your element is in view
$('.col-md-3').addClass('inview');
} else if (getPoints($('.col-md-9'), wt)){
//if your another element is in view
$('.col-md-9').addClass('inview');
}
};
$(document).on('ready', cm);
$(window).on('scroll', cm);
Implementing
In your case, you should do this:
instead of :not(:hover), use a class
.macbook.closed .macbook-lid {
-webkit-transform: rotate3d(-1, 0, 0, 91deg);
-moz-transform: rotate3d(-1, 0, 0, 91deg);
transform: rotate3d(-1, 0, 0, 91deg);
}
Put this class in your div
<div class="macbook closed">
And use your js like this:
var getPoints = function($el, wt){
return (wt > ($el.offset().top - ($(window).height()/2)) && wt < (($el.offset().top) + $el.height()));
}
var cm = function checkMilestones() {
var wt = $(window).scrollTop();
if(getPoints($('.macbook'), wt)){
//check if your element is in view
$('.macbook').removeClass('closed');
} else if (getPoints($('.anotherElement'), wt)){
//if your another element is in view
$('.anotherElement').removeClass('removeClass');
}
};
$(document).on('ready', cm);
$(window).on('scroll', cm);
This seems to work. I've added separate classes for the 7 separate elements on display
$(window).scroll(function () {
$('.macbook').each(function () {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-1");
} else {
$(this).addClass("macbook-1");
}
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-2");
} else {
$(this).addClass("macbook-2");
}
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-3");
} else {
$(this).addClass("macbook-3");
}
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-4");
} else {
$(this).addClass("macbook-4");
}
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-5");
} else {
$(this).addClass("macbook-5");
}
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-6");
} else {
$(this).addClass("macbook-6");
}
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).removeClass("macbook-7");
} else {
$(this).addClass("macbook-7");
}
});
});