20/10 #43
Description
<title>women's day</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 97vh;
}
.container svg {
width: 50%;
height: 50%;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.body-letter {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #fae1dd;
}
.letter {
position: relative;
z-index: 1;
}
.valentines {
position: relative;
top: 50px;
cursor: pointer;
animation: up 3s linear infinite;
}
@Keyframes up {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
}
.envelope {
position: relative;
width: 300px;
height: 200px;
background-color: #f08080;
}
.envelope:before {
background-color: #f08080;
content: "";
position: absolute;
width: 212px;
height: 212px;
transform: rotate(45deg);
top: -105px;
left: 44px;
border-radius: 30px 0 0 0;
}
.card {
position: absolute;
background-color: #eae2b7;
width: 270px;
height: 170px;
top: 5px;
left: 15px;
box-shadow: -5px -5px 100px rgba(0, 0, 0, 0.4);
}
.card:before {
content: "";
position: absolute;
border: 3px solid #003049;
border-style: dotted;
width: 240px;
heighT: 140px;
left: 12px;
top: 12px;
}
.text {
position: absolute;
font-family: 'Brush Script MT', cursive;
font-size: 28px;
text-align: center;
line-height: 25px;
top: 19px;
left: 85px;
color: #003049;
}
.heart {
background-color: #d62828;
display: inline-block;
height: 30px;
margin: 0 10px;
position: relative;
top: 110px;
left: 105px;
transform: rotate(-45deg);
width: 30px;
}
.heart:before,
.heart:after {
content: "";
background-color: #d62828;
border-radius: 50%;
height: 30px;
position: absolute;
width: 30px;
}
.heart:before {
top: -15px;
left: 0;
}
.heart:after {
left: 15px;
top: 0;
}
.hearts {
position: absolute;
top: 0
}
.one,
.two,
.three,
.four,
.five {
background-color: red;
display: inline-block;
height: 10px;
margin: 0 10px;
position: relative;
transform: rotate(-45deg);
width: 10px;
top: 50px;
}
.one:before,
.one:after,
.two:before,
.two:after,
.three:before,
.three:after,
.four:before,
.four:after,
.five:before,
.five:after {
content: "";
background-color: red;
border-radius: 50%;
height: 10px;
position: absolute;
width: 10px;
}
.one:before,
.two:before,
.three:before,
.four:before,
.five:before {
top: -5px;
left: 0;
}
.one:after,
.two:after,
.three:after,
.four:after,
.five:after {
left: 5px;
top: 0;
}
.one {
left: 10px;
animation: heart 1s ease-out infinite;
}
.two {
left: 30px;
animation: heart 2s ease-out infinite;
}
.three {
left: 50px;
animation: heart 1.5s ease-out infinite;
}
.four {
left: 70px;
animation: heart 2.3s ease-out infinite;
}
.five {
left: 90px;
animation: heart 1.7s ease-out infinite;
}
@Keyframes heart {
0% {
transform: translateY(0) rotate(-45deg) scale(0.3);
opacity: 1;
}
100% {
transform: translateY(-150px) rotate(-45deg) scale(1.3);
opacity: 0.5;
}
}
.front {
position: absolute;
border-right: 180px solid #f4978e;
border-top: 95px solid transparent;
border-bottom: 100px solid transparent;
left: 120px;
top: 5px;
width: 0;
height: 0;
z-index: 10;
}
.front:before {
position: absolute;
content: "";
border-left: 300px solid #f8ad9d;
border-top: 195px solid transparent;
left: -120px;
top: -95px;
width: 0;
height: 0;
}
.shadow {
position: absolute;
width: 330px;
height: 25px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
top: 265px;
left: -15px;
animation: scale 3s linear infinite;
z-index: -1;
}
@Keyframes scale {
0%,
100% {
transform: scaleX(1);
}
50% {
transform: scaleX(0.85);
}
}
.hover-animation {
animation: hover 1.75s ease-in-out infinite;
}
#castle {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #fae1dd;
}
.dustDef {
position: absolute;
background-color: white;
border-radius: 100%;
box-shadow: 0 0 3px 1px white;
opacity: 0;
}
@Keyframes hover {
0% {
margin-top: 60px;
}
50% {
margin-top: 50px;
}
100% {
margin-top: 60px;
}
}
@Keyframes glow {
0% {
box-shadow: 0 0 25px 0 #e8b2ca;
}
50% {
box-shadow: 0 0 45px 0 #e8b2ca;
}
100% {
box-shadow: 0 0 25px 0 #e8b2ca;
}
}
@Keyframes fall {
5% {
top: 209px;
left: 105px;
transform: rotate(55deg) scale(0.9, 0.95) skew(-18deg);
opacity: 0.9;
}
30% {
left: 90px;
}
55% {
left: 130px;
}
60%,
100% {
top: 380px;
transform: rotate(30deg) scale(0.9, 0.95) skew(-32deg);
opacity: 0;
}
}
@Keyframes floatAnimate {
0% {
background-size: 105% 120%;
background-position: 0 0;
opacity: 0.7;
}
50% {
background-size: 100% 100%;
background-position: 0 0;
opacity: 0.5;
}
100% {
background-size: 105% 120%;
background-position: 0 0;
opacity: 0.7;
}
}
</style>
<style>
svg {
width: 80%;
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
text {
fill: #e6668a;
font-family: consolas;
font-size: 9px;
}
p {
position: absolute;
z-index: 2
}
label {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
opacity: .8
}
/* style letter */
/* .box-content.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.box-content {
position: fixed;
width: 100%;
height: 100%;
z-index: 100000000000;
top: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.7);
transform: scale(0.01);
visibility: hidden;
transition: 0.5s;
}
.fa-xmark {
position: absolute;
right: 5%;
top: 5%;
font-size: 40px;
color: #fff;
cursor: pointer;
}
.fa-xmark:hover {
filter: drop-shadow(0 0 10px #fff);
}
.image-decorate {
display: flex;
width: 700px;
z-index: 10;
height: 100%;
}
.content1 {
position: absolute;
width: 700px;
height: 500px;
background-image: radial-gradient(circle farthest-corner at center, #f9edf3 10%, #ffd3ee 100%);
border-radius: 10px 70px 10px 70px;
box-shadow: 5px 5px 10px rgb(0, 0, 0);
cursor: pointer;
}
.textLetter {
width: 100%;
flex-direction: column;
justify-content: center;
display: flex;
align-items: center;
user-select: none;
}
.textLetter h2 {
font-size: 30px;
font-family: 'Dancing Script', cursive;
}
.textLetter .contentLetter {
font-size: 19px;
text-align: center;
padding: 0px 30px;
margin-top: 10px;
font-family: 'Dancing Script', cursive;
position: initial;
} */
.letters {
position: absolute;
width: 65px;
transition: 10s ease-in-out;
cursor: pointer;
z-index: 1000;
}
.letters img {
width: 100%;
}
.wrapperLetterForm {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
background: rgba(0, 0, 0, 0.7);
display: none;
}
.boxLetter {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.boxLetter .formLetter {
position: relative;
width: 600px;
height: 350px;
background-color: #FFEBEB;
border-radius: 20px;
z-index: 100;
padding: 20px 15px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.formLetter .wrapperLetter {
position: relative;
width: 100%;
height: 100%;
border: 2px dashed #FF6666;
border-radius: inherit;
display: flex;
}
.boxLetter .before {
position: absolute;
width: 600px;
height: 350px;
background: #fff;
transform: rotate(-15deg);
border-radius: 20px;
z-index: 10;
}
.formLetter .heartLetter {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: #FFEBEB;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.heartLetter .heartLetterItem {
position: relative;
width: 10px;
height: 10px;
transform: rotate(45deg);
background: #FF6666;
}
.heartLetter:first-child {
right: 5px;
top: 10px;
}
.heartLetter:nth-child(2) {
left: 5px;
bottom: 10px;
}
.heartLetterItem::before,
.heartLetterItem::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
}
.heartLetterItem::before {
top: -50%;
}
.heartLetterItem::after {
left: -50%;
}
🌹Happy Women's Day
🌹.........................................................................................................................................🌹From
With Love 20/10!🌹
<script>
let rid = null; // request animation id
const SVG_NS = "http://www.w3.org/2000/svg";
const pathlength = shape.getTotalLength();
let t = 0; // at the begining of the path
let lengthAtT = pathlength * t;
let d = shape.getAttribute("d");
// 1. build the d array
let n = d.match(/C/gi).length; // how many times
let pos = 0; // the position, used to find the indexOf the nth C
class subPath {
constructor(d) {
this.d = d;
this.get_PointsRy();
this.previous = subpaths.length > 0 ? subpaths[subpaths.length - 1] : null;
this.measurePath();
this.get_M_Point(); //lastPoint
this.lastCubicBezier;
this.get_lastCubicBezier();
}
get_PointsRy() {
this.pointsRy = [];
let temp = this.d.split(/[A-Z,a-z\s,]/).filter(v => v); // remove empty elements
temp.map(item => {
this.pointsRy.push(parseFloat(item));
}); //this.pointsRy numbers not strings
}
measurePath() {
let path = document.createElementNS(SVG_NS, "path");
path.setAttributeNS(null, "d", this.d);
// no need to append it to the SVG
// the lengths of every path in dry
this.pathLength = path.getTotalLength();
}
get_M_Point() {
if (this.previous) {
let p = this.previous.pointsRy;
let l = p.length;
this.M_point = [p[l - 2], p[l - 1]];
} else {
let p = this.pointsRy;
this.M_point = [p[0], p[1]];
}
}
get_lastCubicBezier() {
let lastIndexOfC = this.d.lastIndexOf("C");
let temp = this.d
.substring(lastIndexOfC + 1)
.split(/[\s,]/)
.filter(v => v);
let _temp = [];
temp.map(item => {
_temp.push(parseFloat(item));
});
this.lastCubicBezier = [this.M_point];
for (let i = 0; i < _temp.length; i += 2) {
this.lastCubicBezier.push(_temp.slice(i, i + 2));
}
}
}
let subpaths = [];
// create new subPaths
for (let i = 0; i < n; i++) {
// finds the of nth C in d
let newpos = d.indexOf("C", pos + 1);
if (i > 0) {
// if it's not the first C
let sPath = new subPath(d.substring(0, newpos));
subpaths.push(sPath);
}
//change the value of the position pos
pos = newpos;
}
// at the end add d to the subpaths array
subpaths.push(new subPath(d));
// 2. get the index of the bezierLengths where the point at t is
let index;
for (index = 0; index < subpaths.length; index++) {
if (subpaths[index].pathLength >= lengthAtT) {
break;
}
}
function get_T(t, index) {
let T;
lengthAtT = pathlength * t;
if (index > 0) {
T =
(lengthAtT - subpaths[index].previous.pathLength) /
(subpaths[index].pathLength - subpaths[index].previous.pathLength);
} else {
T = lengthAtT / subpaths[index].pathLength;
}
//console.log(T)
return T;
}
let T = get_T(t, index);
let newPoints = getBezierPoints(T, subpaths[index].lastCubicBezier);
drawCBezier(newPoints, partialPath, index);
function getBezierPoints(t, points) {
let helperPoints = [];
// helper points 0,1,2
for (let i = 1; i < 4; i++) {
//points.length must be 4 !!!
let p = lerp(points[i - 1], points[i], t);
helperPoints.push(p);
}
// helper points 3,4
helperPoints.push(lerp(helperPoints[0], helperPoints[1], t));
helperPoints.push(lerp(helperPoints[1], helperPoints[2], t));
// helper point 5 is where the first Bézier ends and where the second Bézier begins
helperPoints.push(lerp(helperPoints[3], helperPoints[4], t));
// points for the dynamic bézier
let firstBezier = [
points[0],
helperPoints[0],
helperPoints[3],
helperPoints[5]
];
//console.log(firstBezier)
return firstBezier;
}
function lerp(A, B, t) {
let ry = [
(B[0] - A[0]) * t + A[0], //x
(B[1] - A[1]) * t + A[1] //y
];
return ry;
}
function drawCBezier(points, path, index) {
let d;
if (index > 0) {
d = subpaths[index].previous.d;
} else {
d = `M${points[0][0]},${points[0][1]} C`;
}
// points.length == 4
for (let i = 1; i < 4; i++) {
d += ` ${points[i][0]},${points[i][1]} `;
}
//console.log(d)
partialPath.setAttributeNS(null, "d", d);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script>
(() => {
setTimeout(() => {
document.querySelector("#text-click").style.display = "inherit";
}, 4000);
document.querySelector("#rose-t").onclick = function () {
document.querySelector("#rose-t").style.display = "none";
document.querySelector("#castle").style.display = "flex";
document.querySelector("#theSvg").style.display = "inherit"
rid = window.requestAnimationFrame(Typing);
function Typing() {
rid = window.requestAnimationFrame(Typing);
if (t >= 1) {
window.cancelAnimationFrame(rid);
rid = null;
} else {
t += 0.0025;
}
lengthAtT = pathlength * t;
for (index = 0; index < subpaths.length; index++) {
if (subpaths[index].pathLength >= lengthAtT) {
break;
}
}
T = get_T(t, index);
newPoints = getBezierPoints(T, subpaths[index].lastCubicBezier);
drawCBezier(newPoints, partialPath, index);
}
}
const head = document.getElementsByTagName('head')[0];
let animationId = 1;
function CreateMagicDust(x1, x2, y1, y2, sizeRatio, fallingTime, animationDelay, node = 'main') {
let dust = document.createElement('span');
let animation = document.createElement('style');
animation.innerHTML = '\
@Keyframes blink' + animationId + '{\
0% {\
top: ' + y1 + 'px;\
left: ' + x1 + 'px;\
width: ' + 2 * sizeRatio + 'px;\
height: ' + 2 * sizeRatio + 'px;\
opacity: .4\
}\
20% {\
width: ' + 4 * sizeRatio + 'px;\
height: ' + 4 * sizeRatio + 'px;\
opacity: .8\
}\
35% {\
width: ' + 2 * sizeRatio + 'px;\
height: ' + 2 * sizeRatio + 'px;\
opacity: .5\
}\
55% {\
width: ' + 3 * sizeRatio + 'px;\
height: ' + 3 * sizeRatio + 'px;\
opacity: .7\
}\
80% {\
width: ' + sizeRatio + 'px;\
height: ' + sizeRatio + 'px;\
opacity: .3\
}\
100% {\
top: ' + y2 + 'px;\
left: ' + x2 + 'px;\
width: ' + 0 + 'px;\
height: ' + 0 + 'px;\
opacity: .1\
}}';
head.appendChild(animation);
dust.classList.add('dustDef');
dust.setAttribute('style', `animation: blink${animationId++} ${fallingTime}s cubic-bezier(.71, .11, .68, .83) infinite ${animationDelay}s`);
document.getElementById(node).appendChild(dust);
}
// yes, I'm doing it manually to get the effect I want.. can be easily changed to render randomly
[[130, 132, 150, 152, .15, 2.5, .1, 'sub'],
[65, 63, 300, 299, .5, 2, .2, 'sub'],
[70, 70, 150, 150, .45, 2, .5],
[75, 78, 160, 170, .6, 2, 1],
[80, 82, 160, 180, .6, 1, .4],
[85, 100, 160, 170, .5, 2, .5],
[125, 110, 170, 180, .25, 3, 1.5],
[90, 90, 115, 115, .4, 2, 2],
[93, 95, 200, 200, .4, 3, 1.5],
[100, 100, 145, 155, .45, 1, .5],
[100, 90, 170, 230, .35, 2, .75],
[100, 102, 115, 112, .35, 3, .25],
[100, 95, 170, 200, .55, 1.5, .75],
[100, 97, 150, 190, .7, 2, 1.5],
[105, 100, 160, 180, .5, 1.5, .725],
[125, 125, 180, 190, .25, 1, .725],
[130, 130, 135, 135, .45, 3, 1.5],
[135, 132, 170, 190, .25, 2.5, .75],
[135, 132, 320, 315, .2, 5, .3, 'sub']
].forEach((o) => CreateMagicDust(...o));
})();
</script>
<script>
// .textLetter text h2
let indexText = 0;
let textLetter = document.querySelector('.textLetter h2');
const textLetterH2 = "Gửi Hoàng Khả Ngân!";
const textLetterH2 = "Gửi babi!";
let timoutTextLetter;
.textLetter {
width: 100%;
flex-direction: column;
justify-content: center;
display: flex;
align-items: center;
user-select: none;
}
.textLetter h2 {
font-size: 30px;
font-family: 'Dancing Script', cursive;
}
.textLetter .contentLetter {
font-size: 19px;
text-align: center;
padding: 0px 30px;
margin-top: 10px;
font-family: 'Dancing Script', cursive;
position: initial;
}
.fa-xmark {
position: absolute;
right: 20px;
top: 20px;
color: #fff;
cursor: pointer;
font-size: 25px;
}
.show {
display: block;
}
.heartAnimation {
position: absolute;
width: 200px;
bottom: 0;
}
.heartAnimation img {
width: 100%;
}
.mewmew1,
.mewmew2 {
position: absolute;
width: 90px;
}
.mewmew1 {
bottom: 0;
left: 0;
}
.mewmew2 {
bottom: 0;
right: 0;
}
.mewmew1 img,
.mewmew2 img {
width: 100%;
}
</style>
Happy
Women's
Day!
Women's
Day!
Click me now !
function textCharLetter() {
if (indexText < textLetterH2.length) {
textLetter.textContent += textLetterH2[indexText];
indexText++;
setTimeout(indexText, 100);
}
else {
clearInterval(timoutTextLetter);
setTimeout(() => {
funcTimeoutLetterContent()
}, 500)
}
}
function funcTimeoutLetter() {
indexText = 0; // Reset indexText
textLetter.textContent = ''; // Xóa nội dung hiện tại của textLetter
clearInterval(timoutTextLetter);
timoutTextLetter = setInterval(() => {
textCharLetter();
}, 200)
}
// chữ của thư bạn muốn gửi
let indexTextContent = 0;
let textLetterContent = document.querySelector('.contentLetter');
const textLetterP = "Hôm nay là ngày 20/10 anh chúc em luôn hạnh phúc và gặp nhiều may mắn trong cuộc sống nhá. Hãy luôn giữ mãi nụ cười trên môi nhá và đừng suy nghĩ nhiều về những thứ không đáng nha";
let timoutTextLetterContent;
function textCharLetterContent() {
if (indexTextContent < textLetterP.length) {
textLetterContent.textContent += textLetterP[indexTextContent];
indexTextContent++;
setTimeout(indexTextContent, 1);
}
else {
clearInterval(timoutTextLetterContent)
}
}
function funcTimeoutLetterContent() {
indexTextContent = 0; // Reset indexTextContent
textLetterContent.textContent = ''; // Xóa nội dung hiện tại của textLetter
clearInterval(timoutTextLetterContent);
timoutTextLetterContent = setInterval(() => {
textCharLetterContent();
}, 100)
}
$(document).ready(function () {
$('.valentines').mouseenter(function () {
$('.card').stop().animate({
top: '-90px'
}, 'slow');
}).mouseleave(function () {
$('.card').stop().animate({
top: 0
}, 'slow');
});
$('.card').click(function () {
$('.box-content').addClass('active');
$(".wrapperLetterForm").fadeIn()
funcTimeoutLetter();
});
$('.fa-xmark').click(function () {
$('.wrapperLetterForm').css('display', 'none');
});
});
var leafOne = document.querySelector('.leafOne');
var stickLine = document.querySelector('.stickLine');
var leafTwo = document.querySelector('.leafTwo');
var leafS1 = document.querySelector('.leafS1');
var rose1 = document.querySelector('.rose1');
var rose2 = document.querySelector('.rose2');
var rose3 = document.querySelector('.rose3');
var rose4 = document.querySelector('.rose4');
var lineDrawing = anime({
targets: [leafOne, stickLine, leafTwo, leafS1, rose1, rose2, rose3, rose4],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutCubic',
duration: 4000,
begin: function (anim) {
//Leaf One
leafOne.setAttribute("stroke", "black");
leafOne.setAttribute("fill", "none");
// Leaf Two
leafTwo.setAttribute("stroke", "black");
leafTwo.setAttribute("fill", "none");
//Stick
stickLine.setAttribute("stroke", "black");
stickLine.setAttribute("fill", "none");
// Leaf S1
leafS1.setAttribute("stroke", "black");
leafS1.setAttribute("fill", "none");
//Rose One
rose1.setAttribute("stroke", "black");
rose1.setAttribute("fill", "none");
//Rose Two
rose2.setAttribute("stroke", "black");
rose2.setAttribute("fill", "none");
//Rose Three
rose3.setAttribute("stroke", "black");
rose3.setAttribute("fill", "none");
//Rose Three
rose4.setAttribute("stroke", "black");
rose4.setAttribute("fill", "none");
},
complete: function (anim) {
//Leaf One
leafOne.setAttribute("fill", "#9CDD05");
leafOne.setAttribute("stroke", "none");
//Leaf Two
leafTwo.setAttribute("fill", "#9CDD05");
leafTwo.setAttribute("stroke", "none");
//Stick
stickLine.setAttribute("fill", "#83AA2E");
stickLine.setAttribute("stroke", "none");
// Leaf S1
leafS1.setAttribute("fill", "#9CDD05");
leafS1.setAttribute("stroke", "none");
// Rose 1
rose1.setAttribute("fill", "#F37D79");
rose1.setAttribute("stroke", "none");
// Rose 2
rose2.setAttribute("fill", "#D86666");
rose2.setAttribute("stroke", "none");
// Rose 3
rose3.setAttribute("fill", "#F37D79");
rose3.setAttribute("stroke", "none");
// Rose 3
rose4.setAttribute("fill", "#D86666");
rose4.setAttribute("stroke", "none");
},
autoplay: true,
});
</script>