تبلیغات

مطالب محبوب

ابزار ساخت 340 بک لینک رایگان
تعداد بازدید: 83042 بازدید
آموزش پیدا کردن هاست یک سایت
تعداد بازدید: 47439 بازدید
کد پاپ اپ (Pop Up) که بعد از کلیک کاربر باز می شود
تعداد بازدید: 46060 بازدید
کاور پست – سری اول
تعداد بازدید: 33769 بازدید
آموزش پیداکردن کشور میزبان هاست یک سایت
تعداد بازدید: 32629 بازدید

آخرین مطالب

آخرین نظرات

هومن میگه خیلی هم عالیه...

هومن میگه خیر...

هومن میگه حتما رسیدگی میشه. مت...

مهدی میگه ممنونم از مطالب خوبت...

ترکمن دشت میگه مرسی از سایت خوبتون....

بایگانی

تبلیغات

دستور پخت و عکس غذا

انجمن وبمستران

عنوان	پاسخ	بازدید	توسط
تصفیه آب با سختی گیر	2	2403	iWater
فرهنگ استفاده از سایت (انجمن جای تبلیغ نیست)	1	3131	admin
Php چیست و نقش آن در طراحی سایت	0	2615	arash.mousavi
گوگل ادوردز Google AdWords در طراحی سایت	0	2154	arash.mousavi
پیدایش تمدن انسان	0	2906	barbod
بالا بردن ارزش طراحی وب سایت	0	1835	arash.mousavi
نکاتی در مورد رقص گوگل	0	1826	arash.mousavi
نکاتی در مورد رقص گوگل	0	1829	arash.mousavi
اهمیت هشتگ در بازاریابی شبکه های اجتماعی	0	2164	masterina
آموزش طراحی سایت-قسمت پنجم-طراحی و کار با فرم ها در php	0	2215	jahansite
آموزش طراحی سایت-مرجع توابع کار با آرایه ها در php :	0	2089	jahansite
مرتب سازی آرایه ها در php :	0	1496	jahansite
معرفی چند تکنیک منسوخ شده سئو	1	1857	baroj
چگونه محتوای سایت را سئو کنیم؟	0	1686	masterina
چند ترفند برای بهینه سازی محتوای سایت	0	1927	masterina

قالب در دست تعمیر با طرح قلب متحرک

پی سی دی ال این سری برای شما قالب در دست تعمیر با طرح قلب متحرک از سری پست های قالب های صفحات آفلاین آماده کرده که به صورت رایگان میتوانید از آن استفاده کنید. این قالب کاملا با جاوااسکریپت نوشته شده و دارای انیمیشن قلب تپنده با مدار های مقناطیسی قرمز ساخته شده. این قالب سازگار با انواع مرورگر ها هست و به خواطر انیمیشن ظاهر بسیار زیبایی دارد.

جهت مشاهده پیشنمایش به ادیتور سایت مراجعه کنید.

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Heart</title>
<style>
canvas {position: absolute;left:0px;top: 0px;width: 100%;height: 100%;background-color: rgba(0,0,0,.2);z-index:-1;}
.text{color:yellow;font-family:'b yekan';font-size:40px;z-index:1;text-align:center;}
.copy{
	font-family:Tahoma;
	font-size:10px;
	position:fixed;
	bottom:5px;
	right:5px;
	z-index:2;
	color:gray;
	text-decoration:none;
}
</style>

</head>
<body>

<div class="text">قالب در دست ساخت میباشد | بزودی برمیگردیم</div>
<canvas id="heart">salam</canvas>
<a href="http://pi3idl.com" class="copy">قالب های عاشقانه</a>
<script>
window.requestAnimationFrame =
    window.__requestAnimationFrame ||
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        (function () {
            return function (callback, element) {
                var lastTime = element.__lastTime;
                if (lastTime === undefined) {
                    lastTime = 0;
                }
                var currTime = Date.now();
                var timeToCall = Math.max(1, 33 - (currTime - lastTime));
                window.setTimeout(callback, timeToCall);
                element.__lastTime = currTime + timeToCall;
            };
        })();
window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));
var loaded = false;
var init = function () {
    if (loaded) return;
    loaded = true;
    var mobile = window.isDevice;
    var koef = mobile ? 0.5 : 1;
    var canvas = document.getElementById('heart');
    var ctx = canvas.getContext('2d');
    var width = canvas.width = koef * innerWidth;
    var height = canvas.height = koef * innerHeight;
    var rand = Math.random;
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.fillRect(0, 0, width, height);

    var heartPosition = function (rad) {
        //return [Math.sin(rad), Math.cos(rad)];
        return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))];
    };
    var scaleAndTranslate = function (pos, sx, sy, dx, dy) {
        return [dx + pos[0] * sx, dy + pos[1] * sy];
    };

    window.addEventListener('resize', function () {
        width = canvas.width = koef * innerWidth;
        height = canvas.height = koef * innerHeight;
        ctx.fillStyle = "rgba(0,0,0,1)";
        ctx.fillRect(0, 0, width, height);
    });

    var traceCount = mobile ? 20 : 50;
    var pointsOrigin = [];
    var i;
    var dr = mobile ? 0.3 : 0.1;
    for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));
    for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));
    for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));
    var heartPointsCount = pointsOrigin.length;

    var targetPoints = [];
    var pulse = function (kx, ky) {
        for (i = 0; i < pointsOrigin.length; i++) {
            targetPoints[i] = [];
            targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;
            targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;
        }
    };

    var e = [];
    for (i = 0; i < heartPointsCount; i++) {
        var x = rand() * width;
        var y = rand() * height;
        e[i] = {
            vx: 0,
            vy: 0,
            R: 2,
            speed: rand() + 5,
            q: ~~(rand() * heartPointsCount),
            D: 2 * (i % 2) - 1,
            force: 0.2 * rand() + 0.7,
            f: "hsla(0," + ~~(40 * rand() + 60) + "%," + ~~(60 * rand() + 20) + "%,.3)",
            trace: []
        };
        for (var k = 0; k < traceCount; k++) e[i].trace[k] = {x: x, y: y};
    }

    var config = {
        traceK: 0.4,
        timeDelta: 0.01
    };

    var time = 0;
    var loop = function () {
        var n = -Math.cos(time);
        pulse((1 + n) * .5, (1 + n) * .5);
        time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta;
        ctx.fillStyle = "rgba(0,0,0,.1)";
        ctx.fillRect(0, 0, width, height);
        for (i = e.length; i--;) {
            var u = e[i];
            var q = targetPoints[u.q];
            var dx = u.trace[0].x - q[0];
            var dy = u.trace[0].y - q[1];
            var length = Math.sqrt(dx * dx + dy * dy);
            if (10 > length) {
                if (0.95 < rand()) {
                    u.q = ~~(rand() * heartPointsCount);
                }
                else {
                    if (0.99 < rand()) {
                        u.D *= -1;
                    }
                    u.q += u.D;
                    u.q %= heartPointsCount;
                    if (0 > u.q) {
                        u.q += heartPointsCount;
                    }
                }
            }
            u.vx += -dx / length * u.speed;
            u.vy += -dy / length * u.speed;
            u.trace[0].x += u.vx;
            u.trace[0].y += u.vy;
            u.vx *= u.force;
            u.vy *= u.force;
            for (k = 0; k < u.trace.length - 1;) {
                var T = u.trace[k];
                var N = u.trace[++k];
                N.x -= config.traceK * (N.x - T.x);
                N.y -= config.traceK * (N.y - T.y);
            }
            ctx.fillStyle = u.f;
            for (k = 0; k < u.trace.length; k++) {
                ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1);
            }
        }
        //ctx.fillStyle = "rgba(255,255,255,1)";
        //for (i = u.trace.length; i--;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2);

        window.requestAnimationFrame(loop, canvas);
    };
    loop();
};

var s = document.readyState;
if (s === 'complete' || s === 'loaded' || s === 'interactive') init();
else document.addEventListener('DOMContentLoaded', init, false);</script>
<h2 style="position:fixed; top:100000%;"><a href="http://pi3idl.com">کد وبلاگ</a></h2>
<h2 style="position:fixed; top:100000%;"><a href="http://www.pi3idl.com/2015/03/maintenance-template-with-heart-animation">قالب در دست تعمیر</a></h2>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

<!doctype html>

<html>

<head>

<title>Heart</title>

<style>

canvas {position: absolute;left:0px;top: 0px;width: 100%;height: 100%;background-color: rgba(0,0,0,.2);z-index:-1;}

.text{color:yellow;font-family:'b yekan';font-size:40px;z-index:1;text-align:center;}

.copy{

font-family:Tahoma;

font-size:10px;

position:fixed;

bottom:5px;

right:5px;

z-index:2;

color:gray;

text-decoration:none;

}

</style>

</head>

<body>

<div class="text">قالب در دست ساخت میباشد | بزودی برمیگردیم</div>

<canvas id="heart">salam</canvas>

<a href="http://pi3idl.com" class="copy">قالب های عاشقانه</a>

window.requestAnimationFrame =

window.__requestAnimationFrame ||

window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

(function () {

return function (callback, element) {

var lastTime = element.__lastTime;

if (lastTime === undefined) {

lastTime = 0;

}

var currTime = Date.now();

var timeToCall = Math.max(1, 33 - (currTime - lastTime));

window.setTimeout(callback, timeToCall);

element.__lastTime = currTime + timeToCall;

};

})();

window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));

var loaded = false;

var init = function () {

if (loaded) return;

loaded = true;

var mobile = window.isDevice;

var koef = mobile ? 0.5 : 1;

var canvas = document.getElementById('heart');

var ctx = canvas.getContext('2d');

var width = canvas.width = koef * innerWidth;

var height = canvas.height = koef * innerHeight;

var rand = Math.random;

ctx.fillStyle = "rgba(0,0,0,1)";

ctx.fillRect(0, 0, width, height);

var heartPosition = function (rad) {

//return [Math.sin(rad), Math.cos(rad)];

return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))];

};

var scaleAndTranslate = function (pos, sx, sy, dx, dy) {

return [dx + pos[0] * sx, dy + pos[1] * sy];

};

window.addEventListener('resize', function () {

width = canvas.width = koef * innerWidth;

height = canvas.height = koef * innerHeight;

ctx.fillStyle = "rgba(0,0,0,1)";

ctx.fillRect(0, 0, width, height);

});

var traceCount = mobile ? 20 : 50;

var pointsOrigin = [];

var i;

var dr = mobile ? 0.3 : 0.1;

for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));

for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));

for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));

var heartPointsCount = pointsOrigin.length;

var targetPoints = [];

var pulse = function (kx, ky) {

for (i = 0; i < pointsOrigin.length; i++) {

targetPoints[i] = [];

targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;

targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;

}

};

var e = [];

for (i = 0; i < heartPointsCount; i++) {

var x = rand() * width;

var y = rand() * height;

e[i] = {

vx: 0,

vy: 0,

R: 2,

speed: rand() + 5,

q: ~~(rand() * heartPointsCount),

D: 2 * (i % 2) - 1,

force: 0.2 * rand() + 0.7,

f: "hsla(0," + ~~(40 * rand() + 60) + "%," + ~~(60 * rand() + 20) + "%,.3)",

trace: []

};

for (var k = 0; k < traceCount; k++) e[i].trace[k] = {x: x, y: y};

}

var config = {

traceK: 0.4,

timeDelta: 0.01

};

var time = 0;

var loop = function () {

var n = -Math.cos(time);

pulse((1 + n) * .5, (1 + n) * .5);

time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta;

ctx.fillStyle = "rgba(0,0,0,.1)";

ctx.fillRect(0, 0, width, height);

for (i = e.length; i--;) {

var u = e[i];

var q = targetPoints[u.q];

var dx = u.trace[0].x - q[0];

var dy = u.trace[0].y - q[1];

var length = Math.sqrt(dx * dx + dy * dy);

if (10 > length) {

if (0.95 < rand()) {

u.q = ~~(rand() * heartPointsCount);

}

else {

if (0.99 < rand()) {

u.D *= -1;

}

u.q += u.D;

u.q %= heartPointsCount;

if (0 > u.q) {

u.q += heartPointsCount;

}

u.vx += -dx / length * u.speed;

u.vy += -dy / length * u.speed;

u.trace[0].x += u.vx;

u.trace[0].y += u.vy;

u.vx *= u.force;

u.vy *= u.force;

for (k = 0; k < u.trace.length - 1;) {

var T = u.trace[k];

var N = u.trace[++k];

N.x -= config.traceK * (N.x - T.x);

N.y -= config.traceK * (N.y - T.y);

}

ctx.fillStyle = u.f;

for (k = 0; k < u.trace.length; k++) {

ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1);

}

//ctx.fillStyle = "rgba(255,255,255,1)";

//for (i = u.trace.length; i--;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2);

window.requestAnimationFrame(loop, canvas);

};

loop();

};

var s = document.readyState;

if (s === 'complete' || s === 'loaded' || s === 'interactive') init();

else document.addEventListener('DOMContentLoaded', init, false);</script>

<h2 style="position:fixed; top:100000%;"><a href="http://pi3idl.com">کد وبلاگ</a></h2>

<h2 style="position:fixed; top:100000%;"><a href="http://www.pi3idl.com/2015/03/maintenance-template-with-heart-animation">قالب در دست تعمیر</a></h2>

</body>

</html>

تاریخ انتشار : 3125 روز قبل

بازدید : 2601 بازدید

دیدگاه ها : بدون دیدگاه

سوالی داری؟ به جمع ما داخل انجمن بگو تا مشکلت حل بشه

فیلم آموزش ساخت کرنومتر با جاوااسکریپت (آموزش جاوااسکریپت)

فیلم آموزش ساخت ادیتور اچ تی ام ال

دیدگاه خود را بیان کنید

کلمات کلیدی اصلی

center code download javascript learn page not found pi3idl pi3idl.com source webmaster آموزش ابزار ابزار وبمستر اموزش بنر لایه باز تبلیغات متنی جاوا اسکریپت جاوااسکریپت دانلود رزبلاگ سورس فایل پی اس دی فیلم آموزشی قالب رزبلاگ قالب سئو شده قالب سایت قالب صفحات 404 قالب صفحه مورد نظر یافت نشد قالب صفحه مورد نظر یافت نشد سئو شده مرجع مرجع اموزش مرجع دانلود مرجع سورس مرجع کد مفید هدر psd هدر لایه باز هدر پی اس دی وبمستر پی اس دی رایگان پی سی دی ال پی سی دی ال دات کام کد کد تایتل کد تولتیپ کد زیبا سازی کد زیبا سازی سایت کد زیبا سازی وبلاگ کد زیبا سازی وبلاگ و سایت کد وبلاگ

طراحی ارزان

بلیط هواپیما

ابزار ساخت 340 بک لینک رایگان

آموزش پیدا کردن هاست یک سایت

کد پاپ اپ (Pop Up) که بعد از کلیک کاربر باز می شود

کاور پست – سری اول

آموزش پیداکردن کشور میزبان هاست یک سایت

قالب در دست تعمیر با طرح قلب متحرک

دیدگاه خود را بیان کنید

پی سی دی ال