Scream for Ice Cream

Developer
Ashlee Phillips
Size
2,927 Kb
Views
34,408
  1. Scream for Ice Cream Previews
  2. Scream for Ice Cream HTML Codes
  3. Scream for Ice Cream CSS Codes
  4. Scream for Ice Cream JS Codes

How do I make an scream for ice cream?

Some transitioning ice cream.. What is a scream for ice cream? How do you make a scream for ice cream? This script and codes were developed by Ashlee Phillips on 15 September 2022, Thursday.

Scream for Ice Cream Previews
IQ Test

Scream for Ice Cream - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scream for Ice Cream</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .container { width: 200px; height: 350px; margin: 0 auto; position: relative; overflow: hidden;
}
.cone { height: 0; width: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-top: 170px solid #E8BA73; position: absolute; bottom: 0; left: 50%; margin-left: -80px; z-index: 10;
}
.scoop { position: absolute; border-radius: 50%; top: -200px;
}
.purple { height: 130px; width: 115px; background: #C98DE8; left: 23px; transition: top 500ms ease;
}
.purple.dropped { top: 105px;
}
.pink { height: 130px; width: 117px; background: #E88DC6; right: 13px; transition: top 500ms ease 500ms;
}
.pink.dropped { top: 75px;
}
.mint { height: 100px; width: 110px; background: #9BFFD6; left: 32px; transition: top 500ms ease 1000ms;
}
.mint.dropped { top: 45px;
}
.cherry { height: 25px; width: 25px; background: #FF011D; right: 80px; transition: top 500ms ease 2000ms;
}
.cherry.dropped { top: 45px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="cone"></div> <div class="scoop purple"></div> <div class="scoop pink"></div> <div class="scoop mint"></div> <div class="scoop cherry"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Scream for Ice Cream - Script Codes CSS Codes

.container { width: 200px; height: 350px; margin: 0 auto; position: relative; overflow: hidden;
}
.cone { height: 0; width: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-top: 170px solid #E8BA73; position: absolute; bottom: 0; left: 50%; margin-left: -80px; z-index: 10;
}
.scoop { position: absolute; border-radius: 50%; top: -200px;
}
.purple { height: 130px; width: 115px; background: #C98DE8; left: 23px; transition: top 500ms ease;
}
.purple.dropped { top: 105px;
}
.pink { height: 130px; width: 117px; background: #E88DC6; right: 13px; transition: top 500ms ease 500ms;
}
.pink.dropped { top: 75px;
}
.mint { height: 100px; width: 110px; background: #9BFFD6; left: 32px; transition: top 500ms ease 1000ms;
}
.mint.dropped { top: 45px;
}
.cherry { height: 25px; width: 25px; background: #FF011D; right: 80px; transition: top 500ms ease 2000ms;
}
.cherry.dropped { top: 45px;
}

Scream for Ice Cream - Script Codes JS Codes

$(document).ready(function() { $('.scoop').addClass('dropped');
});
Scream for Ice Cream - Script Codes
Scream for Ice Cream - Script Codes
Home Page Home
Developer Ashlee Phillips
Username smashlee
Uploaded September 15, 2022
Rating 3
Size 2,927 Kb
Views 34,408
Do you need developer help for Scream for Ice Cream?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ashlee Phillips (smashlee) Script Codes
Name
Styled Form
99 Pledges Login
Minimelephant
Gradient
Project Euler 02
Google login form
CSS Granny
Javascript practice
Food Tag
Form Start Up
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!