لقد وجدت نصًا برمجيًا بلغة جافا سكريبت (JavaScript) بتأثير تساقط الثلج، وكنت أتساءل، هل من الممكن وضع هذا النص البرمجي في السمة؟ حاولت إدراجه في المكان الذي أدرجت فيه CSS، لكن الموقع تعطل، هل هناك مكان آخر يمكنني إدراجه فيه أم أن ديسكورس (Discourse) لا يقبل هذه الأنواع من النصوص البرمجية؟
هل يمكنك إدراج أي نوع من أكواد جافاسكريبت في الرأس؟
وعندما يكون هناك كود HTML مدمج مع CSS، هل أضعه في CSS عادي أم CSS مدمج؟
هل يمكنك عرض الكود الذي تريد إدراجه حتى نتمكن من فهم ما تريد تحقيقه بشكل أفضل؟
html هو
<div></div> 176 مرة
و CSS هو
body {
height: 100vh;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
overflow: hidden;
filter: drop-shadow(0 0 10px white);
}
@function random_range($min, $max) {
$rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
@return $random_range;
}
.snow {
$total: 200;
position: absolute;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
@for $i from 1 through $total {
$random-x: random(1000000) * 0.0001vw;
$random-offset: random_range(-100000, 100000) * 0.0001vw;
$random-x-end: $random-x + $random-offset;
$random-x-end-yoyo: $random-x + ($random-offset / 2);
$random-yoyo-time: random_range(30000, 80000) / 100000;
$random-yoyo-y: $random-yoyo-time * 100vh;
$random-scale: random(10000) * 0.0001;
$fall-duration: random_range(10, 30) * 1s;
$fall-delay: random(30) * -1s;
&:nth-child(#{$i}) {
opacity: random(10000) * 0.0001;
transform: translate($random-x, -10px) scale($random-scale);
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
}
@keyframes fall-#{$i} {
#{percentage($random-yoyo-time)} {
transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
}
to {
transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
}
}
}
}
\u003cscript src=\"https://sites.google.com/site/novoefeitoneve/home/novoefeitoneve/snowstorm.js\"\u003e\u003c/script\u003e
لقد حاولت استخدام جافا سكريبت هذا، لكنه لم يعمل
لا أوصي بربط جافاسكريبت خارجي إذا كنت لا تعرف مدى موثوقيته. إذا تغير النص البرمجي البعيد، فقد يؤدي ذلك إلى تعطل منتداك.
أقترح عليك إنشاء مكون سمة جديد في لوحة الإدارة الخاصة بك. قم بتسميته شيئًا مثل “تأثير ندفة الثلج”.
قم بتحرير مكون السمة الجديد هذا.
-
في علامة التبويب “الرأس” (Head)، انسخ والصق رمز جافاسكريبت داخل وسم HTML
\u003cscript\u003e. -
في علامة التبويب “CSS”، الصق رمز CSS، بدون الجزء
height: 100vh;فيbody {. -
في علامة التبويب “التذييل” (Footer)، الصق 176 مرة
\u003cdiv class=\"snow\"\u003e\u003c/div\u003e. -
استمتع بالثلج الخاص بك.
لاحظ أن هذا التأثير تم إنشاؤه بواسطة شخص ما في بيئته الخاصة بـ HTML، وهو ليس “متوافقًا مع Discourse” بشكل مباشر، وبالتالي قد يتسبب في حدوث مشكلات في منتداك.
يجب عليك حقًا قراءة هذا @danielabc إذا لم تكن قد فعلت ذلك بالفعل:
إعجابَين (2)
قد تستخدم هذا كنموذج: مكون سمة الشتاء الثلجية 
3 إعجابات
لقد وجدت هذا التأثير الثلجي وأعجبني حقًا، لكنه يعمل فقط على سطح المكتب، ولا يعمل على الهاتف المحمول، لماذا؟ هل سأحتاج إلى تفعيل شيء ما على الهاتف المحمول ليعمل؟
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">'+'<\/script>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain2']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain3']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";image_urls['rain4']="https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>')
.attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">'+'<\/script>')}</script><script>$(document).ready(function(){var a=$('<img/>').attr({'src':'https://static.tumblr.com/wt4apym/gG6mxfzjz/lakeside_snowflake.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>
سأرى بشأن ذلك، شكراً
إعجاب واحد (1)
لقد قمت بتثبيته ولكن لم يحدث شيء 
بصراحة، فإن أخذ تأثير تساقط الثلوج بشكل عشوائي من الإنترنت ومحاولة جعله يعمل على Discourse ليس بالمهمة السهلة بالضرورة.
لدى Discourse قيوده الخاصة، ومعظم جافاسكريبت من الخارج الذي تريد تضمينه في Discourse يحتاج إلى تعديل وتكييف لهذه القيود.
لقد حاولت بالأمس وفي الحالة الحالية، التأثير دقيق للغاية. بالتأكيد يمكن تحسينه، ولكن مرة أخرى، هذا يتطلب بعض العمل.
أتفق أيضًا مع الآخرين، إذا كنت ترغب في إضافة تخصيصات إلى موقعك على الويب (يبدو أنك منخرط جدًا فيه وتقرأ Meta كثيرًا)، فيجب أن تبدأ من البداية وتفهم أساسيات HTML و CSS وجافاسكريبت.
أعتقد أن المساعدة المجانية هنا لمثل هذه التخصيصات ستكون محدودة.
إعجاب واحد (1)
شكراً لتوضيح استفساراتي، هناك شيء لم أفهمه وهو أن التأثيرات تعمل على الموقع للهواتف المكتبية، ولكن ليس للهواتف المحمولة، لماذا هذا؟؟؟