Hướng dẫn các bạn cách viết code tỏ tình cực ngầu của dân IT chỉ với HTML, CSS và JavaScript.
1. Trang cuagai.html
2. Code css codetotinh.cs
img{
border: 0;
}
3. Trang cuagai2.html
<text text-anchor="middle"
x="50%"
y="35%"
class="text--line"
>
TỚ LÀ
<text text-anchor="middle"
x="50%"
y="68%"
class="text--line2"
>
DÂN IT
<use xlink:href="#s-text"
<use xlink:href="#s-text"
<use xlink:href="#s-text"
<use xlink:href="#s-text"
<use xlink:href="#s-text"
4. Code JS totinh.js
//Code JS tạo tuyết rơi
var snowStorm = null;
function SnowStorm() {
var flakesMax = 45;
var flakesMaxActive = 45;
var vMaxX = 2;
var vMaxY = 2;
var usePNG = false;
var flakeBottom = null;
var snowStick = false;
var snowCollect = false;
var targetElement = null;
var followMouse = true;
var flakeTypes = 4;
var flakeWidth = 6;
var flakeHeight = 6;
var zIndex = 10;
var flakeLeftOffset = 0;
var flakeRightOffset = 0;
var addEvent = function (o, evtName, evtHandler) {
typeof (attachEvent) == 'undefined' ? o.addEventListener(evtName, evtHandler, false) : o.attachEvent('on' + evtName, evtHandler);
}
var removeEvent = function (o, evtName, evtHandler) {
typeof (attachEvent) == 'undefined' ? o.removeEventListener(evtName, evtHandler, false) : o.detachEvent('on' + evtName, evtHandler);
}
var classContains = function (o, cStr) {
return (typeof (o.className) != 'undefined' ? o.className.indexOf(cStr) + 1 : false);
}
var s = this;
var storm = this;
this.timers = [];
this.flakes = [];
this.disabled = false;
this.terrain = [];
this.active = false;
var isIE = navigator.userAgent.match(/msie/i);
var isIE6 = navigator.userAgent.match(/msie 6/i);
var isWin9X = navigator.appVersion.match(/windows 98/i);
var isiPhone = navigator.userAgent.match(/iphone/i);
var isOpera = navigator.userAgent.match(/opera/i);
if (isOpera) isIE = false;
var screenX = null;
var screenX2 = null;
var screenY = null;
var scrollY = null;
var vRndX = null;
var vRndY = null;
var windOffset = 1;
var windMultiplier = 2;
var docFrag = document.createDocumentFragment();
this.oControl = null;
if (flakeLeftOffset == null) flakeLeftOffset = 0;
if (flakeRightOffset == null) flakeRightOffset = 0;
function rnd(n, min) {
if (isNaN(min)) min = 0;
return (Math.random() * n) + min;
}
this.randomizeWind = function () {
vRndX = plusMinus(rnd(vMaxX, 0.2));
vRndY = rnd(vMaxY, 0.2);
if (this.flakes) {
for (var i = 0; i < this.flakes.length; i++) {
if (this.flakes[i].active) this.flakes[i].setVelocities();
}
}
}
function plusMinus(n) {
return (parseInt(rnd(2)) == 1 ? n * -1 : n);
}
this.scrollHandler = function () {
if (isNaN(scrollY)) scrollY = 0;
if (!flakeBottom && s.flakes) {
for (var i = 0; i < s.flakes.length; i++) {
if (s.flakes[i].active == 0) s.flakes[i].stick();
}
}
}
this.resizeHandler = function () {
screenX = window.innerWidth - (!isIE ? 16 : 2) - flakeRightOffset;
screenY = (flakeBottom ? flakeBottom : window.innerHeight);
} else {
}
screenX2 = parseInt(screenX / 2);
}
this.resizeHandlerAlt = function () {
screenX = targetElement.offsetLeft + targetElement.offsetWidth - flakeRightOffset;
screenY = flakeBottom ? flakeBottom : targetElement.offsetTop + targetElement.offsetHeight;
screenX2 = parseInt(screenX / 2);
}
this.freeze = function () {
if (!s.disabled) {
s.disabled = 1;
} else {
return false;
}
for (var i = 0; i < s.timers.length; i++) {
clearInterval(s.timers[i]);
}
}
this.resume = function () {
if (s.disabled) {
s.disabled = 0;
} else {
return false;
}
s.timerInit();
}
this.toggleSnow = function () {
if (!s.flakes.length) {
s.start();
s.setControlActive(true);
} else {
s.active = !s.active;
if (s.active) {
s.show();
s.resume();
s.setControlActive(true);
} else {
s.stop();
s.freeze();
s.setControlActive(false);
}
}
}
this.setControlActive = function (bActive) {}
this.stop = function () {
this.freeze();
for (var i = this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'none';
}
removeEvent(window, 'scroll', s.scrollHandler);
removeEvent(window, 'resize', s.resizeHandler);
if (!isIE) {
removeEvent(window, 'blur', s.freeze);
removeEvent(window, 'focus', s.resume);
}
}
this.show = function () {
for (var i = this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'block';
}
}
this.SnowFlake = function (parent, type, x, y) {
var s = this;
var storm = parent;
this.type = type;
this.y = (!isNaN(y) ? y : -rnd(screenY) - 12);
this.vX = null;
this.vY = null;
this.vAmpTypes = [2.0, 1.0, 1.25, 1.0, 1.5, 1.75];
this.vAmp = this.vAmpTypes[this.type];
this.active = 1;
this.o = document.createElement('img');
this.o.style.position = 'absolute';
this.o.style.width = flakeWidth + 'px';
this.o.style.height = flakeHeight + 'px';
this.o.style.fontSize = '1px';
this.o.style.zIndex = zIndex;
this.o.src = imagePath + chúng tôi + (pngSupported && usePNG ? '.png' : '.gif');
docFrag.appendChild(this.o);
this.refresh = function () {
s.o.style.left = s.x + 'px';
s.o.style.top = s.y + 'px';
}
this.stick = function () {
s.o.style.top = (screenY + scrollY - flakeHeight - storm.terrain[Math.floor(s.x)]) + 'px';
} else {
s.o.style.display = 'none';
s.o.style.top = 'auto';
s.o.style.bottom = '0px';
s.o.style.position = 'fixed';
s.o.style.display = 'block';
}
}
this.vCheck = function () {
s.vX = 0.2;
s.vX = -0.2;
}
s.vY = 0.2;
}
}
this.move = function () {
s.x += chúng tôi * windOffset;
s.y += (s.vY * s.vAmp);
s.refresh();
if (s.vX && screenX - s.x < flakeWidth + (s.vX * windOffset)) {
s.x = 0;
s.x = screenX - flakeWidth;
}
var yDiff = screenY + scrollY - s.y - storm.terrain[Math.floor(s.x)];
if (yDiff < flakeHeight) {
s.active = 0;
if (snowCollect && snowStick) {
var height = [0.75, 1.5, 0.75];
for (var i = 0; i < 2; i++) {
storm.terrain[Math.floor(s.x) + i + 2] += height[i];
}
}
s.o.style.left = (s.x / screenX * 100) + '%';
if (!flakeBottom) {
if (snowStick) {
s.stick();
} else {
s.recycle();
}
}
}
}
this.animate = function () {
s.move();
}
this.setVelocities = function () {
s.vX = vRndX + rnd(vMaxX * 0.12, 0.1);
s.vY = vRndY + rnd(vMaxY * 0.12, 0.1);
}
this.recycle = function () {
s.o.style.display = 'none';
s.o.style.position = 'absolute';
s.o.style.bottom = 'auto';
s.setVelocities();
s.vCheck();
s.x = parseInt(rnd(screenX - flakeWidth - 20));
s.y = parseInt(rnd(screenY) * -1) - flakeHeight;
s.o.style.left = s.x + 'px';
s.o.style.top = s.y + 'px';
s.o.style.display = 'block';
s.active = 1;
}
this.recycle();
this.refresh();
}
this.snow = function () {
var active = 0;
var used = 0;
var waiting = 0;
for (var i = s.flakes.length; i--;) {
if (s.flakes[i].active == 1) {
s.flakes[i].move();
active++;
} else if (s.flakes[i].active == 0) {
used++;
} else {
waiting++;
}
}
if (snowCollect && !waiting) {
s.createSnow(flakesMaxActive, true);
}
if (active < flakesMaxActive) {
with(s.flakes[parseInt(rnd(s.flakes.length))]) {
if (!snowCollect && active == 0) {
recycle();
} else if (active == -1) {
active = 1;
}
}
}
}
this.mouseMove = function (e) {
if (!followMouse) return true;
var x = parseInt(e.clientX);
if (x < screenX2) {
windOffset = -windMultiplier + (x / screenX2 * windMultiplier);
} else {
x -= screenX2;
windOffset = (x / screenX2) * windMultiplier;
}
}
this.createSnow = function (limit, allowInactive) {
for (var i = 0; i < limit; i++) {
s.flakes[s.flakes.length] = new s.SnowFlake(s, parseInt(rnd(flakeTypes)));
}
targetElement.appendChild(docFrag);
}
this.timerInit = function () {
s.timers = (!isWin9X ? [setInterval(s.snow, 20)] : [setInterval(s.snow, 75), setInterval(s.snow, 25)]);
}
this.init = function () {
for (var i = 0; i < 2048; i++) {
s.terrain[i] = 0;
}
s.randomizeWind();
s.createSnow(snowCollect ? flakesMaxActive : flakesMaxActive * 2);
addEvent(window, 'resize', s.resizeHandler);
addEvent(window, 'scroll', s.scrollHandler);
if (!isIE) {
addEvent(window, 'blur', s.freeze);
addEvent(window, 'focus', s.resume);
}
s.resizeHandler();
s.scrollHandler();
if (followMouse) {
addEvent(document, 'mousemove', s.mouseMove);
}
s.timerInit();
}
var didInit = false;
this.start = function (bFromOnLoad) {
if (!didInit) {
didInit = true;
} else if (bFromOnLoad) {
return true;
}
if (typeof targetElement == 'string') {
targetElement = document.getElementById(targetElement);
if (!targetElement) throw new Error('Snowstorm: Unable to get targetElement');
}
if (!targetElement) {
targetElement = (!isIE ? (document.documentElement ? document.documentElement : document.body) : document.body);
}
if (targetElement != document.documentElement && targetElement != document.body) s.resizeHandler = s.resizeHandlerAlt;
s.resizeHandler();
if (screenX && screenY && !s.disabled) {
s.init();
s.active = true;
}
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
s.start(true)
}, false);
window.addEventListener('load', function () {
s.start(true)
}, false);
} else {
addEvent(window, 'load', function () {
s.start(true)
});
}
}
snowStorm = new SnowStorm();
5. Code CSS totinh2.css
body{
background-image: url("images/anhnen2.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
font: 16em/1 Arial;
}
.text--line {
font-size: .5em;
}
svg {
position: absolute;
width: auto;
height: 250px;
padding:2px;
border-radius: 20px;
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 7% 28%;
stroke-width: 3px;
animation: stroke-offset 4s infinite linear; }
.text-copy:nth-child(1) {
stroke: #360745;
stroke-dashoffset: 7%; }
.text-copy:nth-child(2) {
stroke: #D61C59;
stroke-dashoffset: 14%; }
.text-copy:nth-child(3) {
stroke: #E7D84B;
stroke-dashoffset: 21%; }
.text-copy:nth-child(4) {
stroke: #EFEAC5;
stroke-dashoffset: 28%; }
.text-copy:nth-child(5) {
stroke: #F8F8FF;
stroke-dashoffset: 35%; }
@keyframes stroke-offset {
50% {
stroke-dashoffset: 35%;
stroke-dasharray: 0 87.5%; }
}
p{
padding-top: 300px;
padding-left: 170px;
}