Jump to content

Login Form with animation


Freeman35

Recommended Posts

  • 4 weeks later...

Where add this js file in login form?

 

As quick demo:

 

1. Download particles.js file and place it into "files/" folder

2. on the ServerModule add reference to it using CustomFiles

3. On Custom CSS add the following CSS:

body {
margin: 0;
font:normal 75% Arial, Helvetica, sans-serif;
}



/* ---- particles.js container ---- */

#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}

4. On main Form, place a TUniHtmlFrame on the form, and then add this code

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
UniHTMLFrame1.HTML.Append('<div id="particles-js" width=500 height=500></div>');
UniHTMLFrame1.HTML.Append(
'<script>particlesJS.load(''particles-js'', ''files/particlesjs.json'', function() { console.log(''callback - particles.js config loaded'')});</script>');
end;

 

5. Run the demo and have fun ;-)

 

Regards,

Mohammed

  • Upvote 1
Link to comment
Share on other sites

Thank you Mohammed Nasman,

@CoderU,

Yes,

Create TLoginForm

LoginForm - NoBorder-wsMaximized

my codes:

particles_style.css  or Mohammed's css (I chnaged to this,'cos so simple. Thank you)

TUniHTMLFrame on loginform,

procedure TFRM_Login.UniLoginFormCreate(Sender: TObject);
begin
  UniHTMLFrame1..HTML.Text:='<div id="particles-js"</div>';
  UniHTMLFrame1.AfterScript.Text:= 'particlesJS.load(''particles-js'',''files/particles.json'',function(){console.log(''My Application Started...'');});';
  UniHTMLFrame1.Left:= 1;
  UniHTMLFrame1.Top := 1;
procedure TFRM_Login.UniLoginFormScreenResize(Sender: TObject; AWidth, AHeight: Integer);
begin
  UniHTMLFrame1.Width:= AWidth;
  UniHTMLFrame1.Height:= AHeight;
  • Upvote 1
Link to comment
Share on other sites

Merhaba,

Merhaba Freeman35 .

Örnekteki hint ekranını yapmak için nasıl bir yapı kullandınız?

Onu kullanmanızı tavsiye etmem, bende bıraktım zaten. Her biri için z-zorder gerekiyor, panelin dışına çıkmıyor, size ı değişmiyor vs sıkıntılar var.

function afterrender(sender, eOpts)
{
Ext.create('Ext.tip.ToolTip', {
   target: sender.getEl(),
   baseCls: 'UGS_hint_edit',
   //bodyStyle: 'background:#ffc; padding:10px;',
   html:'<div><b>Başlık</b></div>' +
          '<div>11111</div>' +
          '<div>22222222222</div>' +
          '<div>333333333333333333333333333</div>'
  });      
}

Bunu kullanın bence, ben bunu kullanmaya başladım. css ile ve html ile kullanımı hem kolay hemde daha sorunsuz geldi bana. Buna o ok işareti eklenirse süper olacak, onuda yapan olurda paylaşırsa çok makbule geçer :)

Kokay gele

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 weeks later...
  • 3 years later...
  • 1 month later...

Hello!

I have slightly modified, for myself, the archive with the script from the first message. Everything suits me as it should now.
I corrected the files in the demo directory and now I need to display the same thing that is displayed in index.html in my project in the UniHTMLFrame on the form.

The problem is that the above codes do not animate like in the index.html file

I ask for help on how to register and connect the modified script to the project.

P.S .: UniServerModule.CustomFiles has the path to files/particles.js, but it's not working... :(

 

If I'm using code:

procedure TF_Login.UniLoginFormCreate(Sender: TObject);
begin
  UniHTMLFrame1.HTML.Text:='<div id="particles-js" width=500 height=500</div>';
  UniHTMLFrame1.AfterScript.Text:= 'particlesJS.load(''particles-js'',''files/particles.json'',function(){console.log(''My Application Started...'');});';
end;

...I get this (animation is working):

image.png.ec9f825f646ae9f05dc4ef0c6b8923a7.png

and I'm understand, why background is red and not from CSS...

test_js.zip

Edited by Артем
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...