Jump to content


Photo

Login Form with animation


  • Please log in to reply
11 replies to this topic

#1 Freeman35

Freeman35

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 348 posts

Posted 01 June 2018 - 09:02 AM

This is my login screen.

js Script from

https://github.com/V...au/particles.js

Attached Files


  • 2

#2 Beginner

Beginner

    Active Member

  • Banned
  • PipPipPip
  • 91 posts

Posted 01 June 2018 - 09:33 AM

Share skills how do it?


  • 0

#3 Volk65

Volk65

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 80 posts
  • LocationMSK, Russia

Posted 01 June 2018 - 03:18 PM

Share skills how do it?

+1


  • 0

#4 CoderU

CoderU

    Member

  • Members
  • PipPip
  • 11 posts

Posted 26 June 2018 - 04:58 AM

Where add this js file in login form?


  • 0

#5 Mohammed Nasman

Mohammed Nasman

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 184 posts
  • LocationGaza - Palestine

Posted 28 June 2018 - 08:28 AM

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


  • 1

#6 CoderU

CoderU

    Member

  • Members
  • PipPip
  • 11 posts

Posted 28 June 2018 - 09:16 AM

Thanks Mohammad

but I want to add this to LoginForm

 

Is it right way?

Create TLoginForm

LoginForm - NoBorder-wsMaximized

LoginForm-Layot-Fit-UnihtmlFrame - jsLib


  • 0

#7 Freeman35

Freeman35

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 348 posts

Posted 28 June 2018 - 10:32 AM

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;

  • 1

#8 _Mehmet_

_Mehmet_

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 515 posts
  • LocationAntalya / Turkey

Posted 29 June 2018 - 02:32 PM

Merhaba Freeman35 .

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


  • 0

#9 Freeman35

Freeman35

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 348 posts

Posted 29 June 2018 - 04:17 PM

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


  • 0

#10 _Mehmet_

_Mehmet_

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 515 posts
  • LocationAntalya / Turkey

Posted 01 July 2018 - 11:22 AM

Cok tesekkur ederim.
  • 0

#11 _Mehmet_

_Mehmet_

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 515 posts
  • LocationAntalya / Turkey

Posted 01 July 2018 - 11:22 AM

Cok tesekkur ederim.
  • 0

#12 SayeyeZohor

SayeyeZohor

    Newbie

  • uniGUI Subscriber
  • Pip
  • 6 posts

Posted Yesterday, 04:46 PM

This is my login screen.

js Script from

https://github.com/V...au/particles.js

 

hi, please send sample code?


  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users