پیدا کردن تصویر یا ویدئوی بک گراند یک سایت

برنامه نویسی و توسعه وردپرس
1

سلام خدمت تمامی اعضای محترم انجمن سون هاست.
می خواستم تصویر یا ویدئوی بک گراند یک سایت رو پیدا کنم.عکس های معمولی یک سایت رو می شه راحت SAVE کرد اما بک گراند رو نمی تونم

برای مثال بک گراند این سایت زیر که یک حالت موج داره رو چه جوری می شه ذخیره کرد؟
www.nepso.com

1 پسندیده
2

سلام خدمت شما
سایتی که میفرمایید بک گراندی که موج داشته باشه نداره از کد های svg به همراه جاوا اسکریپت برای ایجاد چنین طرح متحرکی استفاده کرده

3 پسندیده
3

سلام حسین جان
ممنون
افزونه ای هست که این کار رو انجام بده؟

1 پسندیده
4

حقیقتا افزونه ای ندیدم برای این مورد

1 پسندیده
5

سایتی هست که این کدها رو اماده داشته باشه؟ و این که کدهای جاوا اسکریپت رو می شه مثل کدهای html توی ویرایشگر متن وردپرس گذاشت؟

1 پسندیده
6

تو وب سایت Codepen از این موارد خیلی زیاد هست.

باید بگردید:
https://codepen.io/tag/css-animation/

5 پسندیده
7

ممنونم جناب سیدزاده
کدهای همشون سه بخش داره.
یه کد جاوااسکریپت(که البته عمدتا ندارن) یه کد css و یه کد html
ممکنه توضیح بدید که هر قسمت از کد رو کجا باید بذارم؟
فرض کنید می خوام توی یکی از صفحاتم ازشون استفاده کنم
مثلا یه دونشون برای بارش برف بود
این کدهای جاوا اسکریپتش

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

(function letItSnow(){
  var snowflakes = document.querySelectorAll('.snow');
  for (var i = 0; i < snowflakes.length; i++) {
    var snowflake = snowflakes[i];
    snowflake.setAttribute('cx', getRandom(1,100) + '%');
    snowflake.setAttribute('cy', '-' + getRandom(1,100));
    snowflake.setAttribute('r', getRandom(1,3));
  }
})();

اینا هم css

html {
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  background: hsl(190,70%,30%); 
  background: -moz-linear-gradient(top, hsl(190,70%,30%) 0%, hsl(190,70%,60%) 100%); /* FF3.6+ */
  background: -webkit-linear-gradient(top, #f0f9ff 0%, hsl(190,70%,60%) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, hsl(190,70%,30%) 0%, hsl(190,70%,60%) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, hsl(190,70%,30%) 0%, hsl(190,70%,60%) 100%); /* IE10+ */
  background: linear-gradient(to bottom, hsl(190,70%,30%) 0%, hsl(190,70%,60%) 100%);
}
.svg-snowscene {
  width: 100%;
}
.snow {
  fill: #fff; 
  animation-name: snowing;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  &:nth-child(2n){
    animation-delay: 1.5s;
  }
  &:nth-child(3n){
    animation-delay: 2.3s;
    animation-duration: 3.3s;
  }
  &:nth-child(4n){
    animation-delay: 0.8s;
    animation-duration: 3.2s;
  }
  &:nth-child(5n){
    animation-delay: 2.8s;
  }
}

@keyframes snowing {
  0%{ fill-opacity: 1; }
  100% { 
    fill-opacity: 0;
    transform: translateY(200px);
  }
}

و اینا هم html

<svg class="svg-snowscene" xmlns="http://www.w3.org/2000/svg">
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
</svg>

این هم لینک صفحه

https://codepen.io/anon/pen/dwbZjJ?page=23
وقتی خروجی گرفتم این فایل رو هم داد
snowfall.zip (3.3 کیلوبایت)
یه خروجی دیگه هم داره که خودش سه نوعه
(WordPress Shortcode ، iframe،HTML (recommended

این کد html ش هست

<p data-height="265" data-theme-id="0" data-slug-hash="dwbZjJ" data-default-tab="html,result" data-user="bakhiz" data-pen-title="Snowfall" class="codepen">See the Pen <a href="https://codepen.io/bakhiz/pen/dwbZjJ/">Snowfall</a> by hamid (<a href="https://codepen.io/bakhiz">@bakhiz</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

image
image.png1237×375 19.8 KB

1 پسندیده
8

درود

دیگه این بر می گرده به دانش شما از HTML و CSS.

کد CSS باید فراخوانی بشه، کد HTML هم هر جا بزارید، همون جا نشون داده میشه.
مثلا اگه از Visual Composer استفاده می کنید، می تونید یه بلاک HTML ایجاد کنید و کد html رو در اون قرار بدین و کد CSS هم در قالب فراخوانی کنید.

3 پسندیده
9

برای css و html مشکلی ندارم
کد جاوااسکریپت رو کجا باید بذارم؟

1 پسندیده
10

همونطور که css رو اضافه می کنید، این هم در یکی از فایل های جاوا اسکریپت قالب بزارید و ذخیره کنید.
از افزونه هم می تونید استفاده کنید که هم css و هم js رو براحتی اضافه کنید.

افزونه Custom CSS & JS این کار رو انجام میده.

نکته:‌ سعی کنید تعداد افزونه ها رو به کمترین حد برسونید. این درست نیست که برای هر چیزی افزونه ای نصب کنید.

3 پسندیده