ایزی دیزاین 35 ارسال شده در مهر 97 گزارش بازنشر ارسال شده در مهر 97 با عرض سلام میخواستم بدونم سایت زیر از چه نوع بک گراندی استفاده کرده و چطور میشه همچنین بک گراندی رو در هدر سایت وردپرسی ایجاد کنیم با تشکر ادرس سایت http://moderntheme.ir/ نقل قول لینک به ارسال
Mobin 1669 ارسال شده در مهر 97 گزارش بازنشر ارسال شده در مهر 97 اگه منظورتون عکس بک گراند هست که درون فایل component.css هست .demo-1 .large-header { background-image: url('../img/demo-1-bg.jpg'); } اگه منظورتون افکتش هست که با js هست که اسمش particles.js هست 4 نقل قول لینک به ارسال
amirhosein-wp 39 ارسال شده در مهر 97 گزارش بازنشر ارسال شده در مهر 97 در ۱ ساعت قبل، Mobin گفته است : اگه منظورتون عکس بک گراند هست که درون فایل component.css هست .demo-1 .large-header { background-image: url('../img/demo-1-bg.jpg'); } اگه منظورتون افکتش هست که با js هست که اسمش particles.js هست particles.js در گیت 2 نقل قول لینک به ارسال
mehran-b 2385 ارسال شده در مهر 97 گزارش بازنشر ارسال شده در مهر 97 سلام و درود @iwf2050 ضمن تشکر از دوستان جهت پاسخگویی. این Canvas ای که توی سایتی که اشاره کردید از کتابخونه particles.js توش استفاده نشده ولی particles.js هم فک کنم بشه همچین چیزی ساخت. کدهای مربوط به Canvas سایت مورد نظر کدهای زیر هست. (function() { var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true; // Main initHeader(); initAnimation(); addListeners(); function initHeader() { width = window.innerWidth; height = window.innerHeight; target = {x: width/2, y: height/2}; largeHeader = document.getElementById('large-header'); largeHeader.style.height = height+'px'; canvas = document.getElementById('demo-canvas'); canvas.width = width; canvas.height = height; ctx = canvas.getContext('2d'); // create points points = []; for(var x = 0; x < width; x = x + width/20) { for(var y = 0; y < height; y = y + height/20) { var px = x + Math.random()*width/20; var py = y + Math.random()*height/20; var p = {x: px, originX: px, y: py, originY: py }; points.push(p); } } // for each point find the 5 closest points for(var i = 0; i < points.length; i++) { var closest = []; var p1 = points[i]; for(var j = 0; j < points.length; j++) { var p2 = points[j] if(!(p1 == p2)) { var placed = false; for(var k = 0; k < 5; k++) { if(!placed) { if(closest[k] == undefined) { closest[k] = p2; placed = true; } } } for(var k = 0; k < 5; k++) { if(!placed) { if(getDistance(p1, p2) < getDistance(p1, closest[k])) { closest[k] = p2; placed = true; } } } } } p1.closest = closest; } // assign a circle to each point for(var i in points) { var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)'); points[i].circle = c; } } // Event handling function addListeners() { if(!('ontouchstart' in window)) { window.addEventListener('mousemove', mouseMove); } window.addEventListener('scroll', scrollCheck); window.addEventListener('resize', resize); } function mouseMove(e) { var posx = posy = 0; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } target.x = posx; target.y = posy; } function scrollCheck() { if(document.body.scrollTop > height) animateHeader = false; else animateHeader = true; } function resize() { width = window.innerWidth; height = window.innerHeight; largeHeader.style.height = height+'px'; canvas.width = width; canvas.height = height; } // animation function initAnimation() { animate(); for(var i in points) { shiftPoint(points[i]); } } function animate() { if(animateHeader) { ctx.clearRect(0,0,width,height); for(var i in points) { // detect points in range if(Math.abs(getDistance(target, points[i])) < 4000) { points[i].active = 0.3; points[i].circle.active = 0.6; } else if(Math.abs(getDistance(target, points[i])) < 20000) { points[i].active = 0.1; points[i].circle.active = 0.3; } else if(Math.abs(getDistance(target, points[i])) < 40000) { points[i].active = 0.02; points[i].circle.active = 0.1; } else { points[i].active = 0; points[i].circle.active = 0; } drawLines(points[i]); points[i].circle.draw(); } } requestAnimationFrame(animate); } function shiftPoint(p) { TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100, y: p.originY-50+Math.random()*100, ease:Circ.easeInOut, onComplete: function() { shiftPoint(p); }}); } // Canvas manipulation function drawLines(p) { if(!p.active) return; for(var i in p.closest) { ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p.closest[i].x, p.closest[i].y); ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')'; ctx.stroke(); } } function Circle(pos,rad,color) { var _this = this; // constructor (function() { _this.pos = pos || null; _this.radius = rad || null; _this.color = color || null; })(); this.draw = function() { if(!_this.active) return; ctx.beginPath(); ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false); ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')'; ctx.fill(); }; } // Util function getDistance(p1, p2) { return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2); } })(); که از Canvas و requestAnimationFrame با هم جهت ایجاد این افکت استفاده شده. 2 نقل قول لینک به ارسال
ایزی دیزاین 35 ارسال شده در مهر 97 مالک گزارش بازنشر ارسال شده در مهر 97 در 13 ساعت قبل، mehran-b گفته است : سلام و درود @iwf2050 ضمن تشکر از دوستان جهت پاسخگویی. این Canvas ای که توی سایتی که اشاره کردید از کتابخونه particles.js توش استفاده نشده ولی particles.js هم فک کنم بشه همچین چیزی ساخت. کدهای مربوط به Canvas سایت مورد نظر کدهای زیر هست. (function() { var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true; // Main initHeader(); initAnimation(); addListeners(); function initHeader() { width = window.innerWidth; height = window.innerHeight; target = {x: width/2, y: height/2}; largeHeader = document.getElementById('large-header'); largeHeader.style.height = height+'px'; canvas = document.getElementById('demo-canvas'); canvas.width = width; canvas.height = height; ctx = canvas.getContext('2d'); // create points points = []; for(var x = 0; x < width; x = x + width/20) { for(var y = 0; y < height; y = y + height/20) { var px = x + Math.random()*width/20; var py = y + Math.random()*height/20; var p = {x: px, originX: px, y: py, originY: py }; points.push(p); } } // for each point find the 5 closest points for(var i = 0; i < points.length; i++) { var closest = []; var p1 = points[i]; for(var j = 0; j < points.length; j++) { var p2 = points[j] if(!(p1 == p2)) { var placed = false; for(var k = 0; k < 5; k++) { if(!placed) { if(closest[k] == undefined) { closest[k] = p2; placed = true; } } } for(var k = 0; k < 5; k++) { if(!placed) { if(getDistance(p1, p2) < getDistance(p1, closest[k])) { closest[k] = p2; placed = true; } } } } } p1.closest = closest; } // assign a circle to each point for(var i in points) { var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)'); points[i].circle = c; } } // Event handling function addListeners() { if(!('ontouchstart' in window)) { window.addEventListener('mousemove', mouseMove); } window.addEventListener('scroll', scrollCheck); window.addEventListener('resize', resize); } function mouseMove(e) { var posx = posy = 0; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } target.x = posx; target.y = posy; } function scrollCheck() { if(document.body.scrollTop > height) animateHeader = false; else animateHeader = true; } function resize() { width = window.innerWidth; height = window.innerHeight; largeHeader.style.height = height+'px'; canvas.width = width; canvas.height = height; } // animation function initAnimation() { animate(); for(var i in points) { shiftPoint(points[i]); } } function animate() { if(animateHeader) { ctx.clearRect(0,0,width,height); for(var i in points) { // detect points in range if(Math.abs(getDistance(target, points[i])) < 4000) { points[i].active = 0.3; points[i].circle.active = 0.6; } else if(Math.abs(getDistance(target, points[i])) < 20000) { points[i].active = 0.1; points[i].circle.active = 0.3; } else if(Math.abs(getDistance(target, points[i])) < 40000) { points[i].active = 0.02; points[i].circle.active = 0.1; } else { points[i].active = 0; points[i].circle.active = 0; } drawLines(points[i]); points[i].circle.draw(); } } requestAnimationFrame(animate); } function shiftPoint(p) { TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100, y: p.originY-50+Math.random()*100, ease:Circ.easeInOut, onComplete: function() { shiftPoint(p); }}); } // Canvas manipulation function drawLines(p) { if(!p.active) return; for(var i in p.closest) { ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p.closest[i].x, p.closest[i].y); ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')'; ctx.stroke(); } } function Circle(pos,rad,color) { var _this = this; // constructor (function() { _this.pos = pos || null; _this.radius = rad || null; _this.color = color || null; })(); this.draw = function() { if(!_this.active) return; ctx.beginPath(); ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false); ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')'; ctx.fill(); }; } // Util function getDistance(p1, p2) { return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2); } })(); که از Canvas و requestAnimationFrame با هم جهت ایجاد این افکت استفاده شده. ایا امکانش هست کمی بیشتر توضیح بدید که چطور باید از کدهای بالا استفاده کنیم و از این افکت استفاده کنیم ؟ در صورت امکان لطف کنید با یک مثال توضیح بدید . با تشکر و احترام فراوان نقل قول لینک به ارسال
ایزی دیزاین 35 ارسال شده در مهر 97 مالک گزارش بازنشر ارسال شده در مهر 97 در 14 ساعت قبل، Mobin گفته است : اگه منظورتون عکس بک گراند هست که درون فایل component.css هست .demo-1 .large-header { background-image: url('../img/demo-1-bg.jpg'); } اگه منظورتون افکتش هست که با js هست که اسمش particles.js هست ایا امکانش هست کمی بیشتر توضیح بدید که چطور باید از particles.js استفاده کنیم ؟ در صورت امکان لطف کنید با یک مثال توضیح بدید . با تشکر و احترام فراوان نقل قول لینک به ارسال
mehran-b 2385 ارسال شده در مهر 97 گزارش بازنشر ارسال شده در مهر 97 در 34 دقیقه قبل، iwf2050 گفته است : ایا امکانش هست کمی بیشتر توضیح بدید که چطور باید از کدهای بالا استفاده کنیم و از این افکت استفاده کنیم ؟ در صورت امکان لطف کنید با یک مثال توضیح بدید . با تشکر و احترام فراوان canvas.html 2 نقل قول لینک به ارسال
ایزی دیزاین 35 ارسال شده در مهر 97 مالک گزارش بازنشر ارسال شده در مهر 97 بسیار ممنونم نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .